如何在 class 组件内的 MERN 上创建分页？

Question

我是 MERN 开发的新手，我想知道如何在 class 组件中创建分页？ 我发现的大多数教程都是分页在 function 内。 另外我有点困惑我应该把路由放在哪里，因为所有文件都在 App.js 上的路由内 JSON 本地存储上的分页有很大不同。

这是我的 App.js，我所有的连接都在这个文件中。

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import LandingPage from "./components/LandingPage";
import DetailPage from "./components/DetailPage";
import CreateUser from "./components/CreateUser";
import EditUser from "./components/EditUser";
import Header from "./components/Header";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="container">
          <Header />
          <Route path="/" exact component={LandingPage} />
          <Route path="/user/:id" component={DetailPage} />
          <Route path="/add" component={CreateUser} />
          <Route path="/edit/:id" component={EditUser} />
        </div>
      </BrowserRouter>
      
    );
  }
}

export default App;

我想在 LandingPage.js 上显示分页，用户可以在其中看到表格内的数据数量。 LandingPage 也是我在这个项目中的默认网页。

import React, { Component } from "react";
import axios from "axios";



class LandingPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: []
    }

  }

  componentDidMount() {
    this.retrieveUsers();
  }

  retrieveUsers() {
    axios.get('/user').then(res => {
      if (res.data.success) {
        this.setState({
          users: res.data.existingUsers
        });

      }

      console.log(this.state.users)
    });
  }

  onDelete = (id) => {
      axios.delete(`/delete/${id}`).then((res) => {
          alert(" User has been deleted successfully");
          this.retrieveUsers();
      });
  };

  render() {
    return (
      <div className="container">
        <br></br>
        <a className="btn btn-success" href={`/add`}> <i className="material-icons">group add</i></a>
        <a className="btn btn-success" href={`/`}> <i className="material-icons">report</i> Report</a>
        <table className="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Full Name</th>
              <th scope="col">Email</th>
              <th scope="col">Contact Number</th>
              <th scope="col">Location</th>
              <th scope="col">Date Registered</th>
              <th scope="col">Actions</th>
            </tr>
          </thead>
          <tbody>
            {this.state.users.map((users, index) => (
              <tr key ={index}>
                <th scope="row">{index}</th>
                <td>
                  <a href={`/user/${users._id}`} style={{textDecoration:"none"}} >
                  {users.name} 
                  </a>
                  </td>
                <td>{users.email}</td>
                <td>{users.phone}</td>
                <td>{users.loc}</td>
                <td>{users.date}</td>
                <td>
                  <a className="btn btn-success" href={`/user/${users._id}`}><i className="material-icons">preview</i></a>
                  &nbsp;
                  <a className="btn btn-warning" href={`/edit/${users._id}`}><i className="material-icons">edit</i></a>
                  &nbsp;
                  <a className="btn btn-danger" href="#" onClick={()=>this.onDelete(users._id)}><i className="material-icons">delete</i></a>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        
       
      </div>
        
      
    )
  }
}

export default LandingPage;

我想在https://mui.com/components/tables/#StickyHeadTable.tsx上使用这个表格作为我制作这个表格分页的参考。 希望有人能在这个问题上帮助我。