React & Material-UI 分页 - 将 Material-UI 的组件连接到 React-Router

Question

我有一个组件可以处理从 API 中提取的房地产列表的分页。它正在成功显示适当数量的列表，并正在处理创建适当数量的链接。

看起来像这样：

const Paginations = ({ listingsPerPage, totalListings, paginate }) => {
    const pageNumbers = [];

    for(let i = 1; i <= Math.ceil(totalListings / listingsPerPage); i++) {
        pageNumbers.push(i);
    }

    return (
         <ul>
           {pageNumbers.map(number => (
               <li key={number}>
                   <a onClick={() => paginate(number)} href="#">
                       {number}
                   </a>
               </li>
           ))}
       </ul>
    );
}

export default Paginations;

我想用 Material-UI 的 Pagination 组件替换基本的 ul。我还想将它连接到 React-Router 并让它处理到适当页面的路由，即组件的 URL 是 /search/，如果您单击 3，它将带您到 /search?page=3。

Material-UI 给出的示例如下所示：

import React from 'react';
import { MemoryRouter, Route } from 'react-router';
import { Link } from 'react-router-dom';
import Pagination from '@material-ui/lab/Pagination';
import PaginationItem from '@material-ui/lab/PaginationItem';

export default function PaginationLink() {
  return (
    <MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
      <Route>
        {({ location }) => {
          const query = new URLSearchParams(location.search);
          const page = parseInt(query.get('page') || '1', 10);
          return (
            <Pagination
              page={page}
              count={10}
              renderItem={(item) => (
                <PaginationItem
                  component={Link}
                  to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}
                  {...item}
                />
              )}
            />
          );
        }}
      </Route>
    </MemoryRouter>
  );
}

如何将示例与路由器合并到我的分页组件中？

Answer 1

https://codesandbox.io/s/material-demo-forked-uhczc?file=/demo.js

请找到上面的链接，这将帮助您创建素材ui路由器分页。

尝试更改网址例如：https://....../5（分页将设置为 5）