URL 地址和分页。 React.Js，Material-UI

Question

我的网站有一个功能组件页面，在其中一个页面内我有一个表格，这个表格获取 API 上的数据。为了更舒适，表格有分页。我正在使用 Material-UI 中的现成解决方案分页。我的分页工作正常，当我更改页面时，表中的数据正在更改，但 URL 地址没有。我希望能够发送带有一些参数（如 GET 请求或其他东西）的 URL，它显示表的特定页面。

我尝试使用两种解决方案，但都不能按我的需要工作

路由器的第一个解决方案。我不确定这是否是我需要的，因为表格的页面没有单独的页面，表格只是从 API 获取数据，然后将它们分开在页面上。此外，此解决方案为页面创建链接，但在浏览页面时不会更改 URL

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

const useStyles = makeStyles((theme) => ({
    root: {
        '& > *': {
            marginTop: theme.spacing(2),
        },
        display: 'flex'
    },
    pagination: {
        marginLeft: 'auto',
        marginBottom: '2%'
    }
}));

function Paginations({ totalPages, setCurrentPage }) {
    const classes = useStyles();

    const paginationHandler = (event, value) => {
        setCurrentPage(value);
    };

    return (
        <MemoryRouter initialEntries={['/log']} initialIndex={0}>
            <Route>
                {({ location }) => {
                    const query = new URLSearchParams(location.search);
                    const page = parseInt(query.get('page') || '1', 10);
                    return (
                        <div className={classes.root}>
                            <Pagination
                                className={classes.pagination}
                                page={page}
                                count={totalPages}
                                onChange={paginationHandler}
                                renderItem={(item) => (
                                    <PaginationItem
                                        component={Link}
                                        to={`/log${item.page === 1 ? '' : `?page=${item.page}`}`}
                                        {...item}
                                    />
                                )}
                            />
                        </div>
                    );
                }}
            </Route>
        </MemoryRouter >
    )
}

export default Paginations;

第二种解决方案：改变表格中的页面但不是改变URL

import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import Pagination from '@material-ui/lab/Pagination';

const useStyles = makeStyles((theme) => ({
    root: {
        '& > *': {
            marginTop: theme.spacing(2),
        },
        display: 'flex'
    },
    pagination: {
        marginLeft: 'auto',
        marginBottom: '2%'
    }
}));

function Paginations({ totalPages, setCurrentPage }) {
    const classes = useStyles();

    const paginationHandler = (event, value) => {
        setCurrentPage(value);
    };

    return (
        <div className={classes.root}>
            <Pagination count={totalPages} className={classes.pagination} onChange={paginationHandler} variant="outlined" shape="rounded" />
        </div>
    )
}

export default Paginations;

Answer 1

我不会编辑您的代码，但会概述如何实现您的解决方案的原则。

您需要在组件中保留分页状态。然后，你需要做两件事：

• 更改页面时，将 url 中的查询参数设置为 页码。还要将该页码保留在您的状态中，作为您的 分页现在是一个受控组件。
• 最初加载组件时，从 url 中获取页码 参数并使用此信息设置您的分页状态。因此表格可以显示在该页面上。

这是最简单的工作示例：

import React from 'react';
import './App.css';
import { useHistory } from "react-router-dom";

const App = (props: Object) => {
const history = useHistory();

let search = window.location.search;
let params = new URLSearchParams(search);

const [page, setPage] = React.useState<number>( parseInt("" + params.get('page')))

const paginate = (n: number) => {
    setPage(n)
    history.push({
        pathname: '/',
        search: '?page=' + n
      })
}

return (
<div >
    <div onClick={()=>paginate(1)} style={page===1 ? {fontSize:30} : {}}>1</div>
    <div onClick={()=>paginate(2)} style={page===2 ? {fontSize:30} : {}}>2</div>
</div>
);
}

export default App;

代码沙盒：

https://codesandbox.io/s/react-pagination-7do5s

或者，可以在 React.useEffect 挂钩中仅在第一次挂载之后计算和设置搜索、参数和页面变量。由你决定。

请注意这是一个打字稿文件，如果您只使用 Javascript，请删除类型。 另外我正在使用 react-router-dom 来更改 url 中的查询参数。只有当这个组件被路由器包裹时，这才有效。

我的 index.tsx 文件：

ReactDOM.render(
  <React.StrictMode>
      <Router>
        <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);