分页恢复为否。 1 当点击后退按钮时

Question

我正在 ReactJS 创建一个分页，并从分页页面重定向到其他页面。 如果我在分页的第 4 页，从第 4 页开始，我 go 到其他页面，当我回到上一页时，我应该在分页的第 4 页。 但是，在按下后退按钮后，分页会从 1 重新开始。 我该如何解决？？

分页.js

import React from 'react'
import { Pagination } from '@mui/material';

const CustomPagination = (props) => {

  const handlePageChange = (event, page) => {
    props.setPage(page);
  }

  return (
    <Pagination 
    count = {10}
    onChange = { handlePageChange}
    color = "primary"
    size='large'
    />
  )
}

export default CustomPagination

首页.js

const [page, setPage] = useState(1);

useEffect(() => {
    fetchData();
  }, [page])

我该如何解决？

Answer 1

这个问题是因为你的页面在你往回移动时完全重新渲染， page值设置为1： const [page, setPage] = useState(1);

您可以在查询中存储页面： /your-route?page=4

像这样的东西应该适用于 Next.js：

import { useRouter } from 'next/router';
...

const router = useRouter();
const { page } = router.query;

const [page, setPage] = useState(page || 1);