分頁恢復為否。 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);