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

Posted 2023-02-21

【中文标题】React & Material-UI 分页 - 将 Material-UI 的组件连接到 React-Router

【英文标题】：React & Material-UI Pagination - Hooking up Material-UI's component to React-Router

【发布时间】：2020-11-18 07:37:38

【问题描述】：

我有一个组件可以处理从 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>
  );

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

【参考方案1】：

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

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

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

【讨论】：

请对您的回答进行详细解释，以便其他用户更好地理解。此外，最好将相关代码粘贴到您的答案中，以防您提供的链接关闭。