ReactJS分页返回后重置为第1页的问题求解

当前你的分页状态存在组件的useState中，一旦路由切换导致组件卸载再重新挂载，useState会回到初始值1，所以返回后页码重置。要解决这个问题，核心是把页码状态持久化到URL参数或者本地存储，这里推荐用URL参数，更符合浏览器前进后退的导航逻辑，也支持页面刷新和分享链接。

方案1：通过URL搜索参数持久化页码（推荐） #

修改Home.js代码 #

使用React Router的useLocation读取当前URL的参数，useNavigate更新URL参数，确保页码和URL同步：

import { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import CustomPagination from './Pagination';

const Home = () => {
  const location = useLocation();
  const navigate = useNavigate();
  // 从URL参数读取初始页码，没有则默认1
  const [page, setPage] = useState(() => {
    const searchParams = new URLSearchParams(location.search);
    return parseInt(searchParams.get('page')) || 1;
  });

  // 当页码变化时，更新URL参数
  useEffect(() => {
    const searchParams = new URLSearchParams(location.search);
    if (page === 1) {
      searchParams.delete('page'); // 页码为1时移除参数，保持URL简洁
    } else {
      searchParams.set('page', page.toString());
    }
    navigate({ search: searchParams.toString() }, { replace: true }); // 替换当前历史记录，避免重复条目
  }, [page, location.search, navigate]);

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

  const fetchData = () => {
    // 你的数据请求逻辑，使用page参数获取对应页数据
    console.log(`获取第${page}页数据`);
  };

  return (
    <div>
      {/* 你的列表内容 */}
      <CustomPagination setPage={setPage} page={page} />
    </div>
  );
};

export default Home;

修改Pagination.js（优化选中状态） #

给MUI的Pagination组件加上page属性，让它能正确显示当前选中的页码：

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'
      page={props.page} // 绑定当前页码，确保选中状态正确
    />
  )
}

export default CustomPagination

方案2：通过localStorage持久化页码 #

如果不需要在URL中显示页码，可以用localStorage存储：

修改Home.js代码 #

import { useState, useEffect } from 'react';
import CustomPagination from './Pagination';

const Home = () => {
  // 从localStorage读取初始页码，没有则默认1
  const [page, setPage] = useState(() => {
    return parseInt(localStorage.getItem('currentPage')) || 1;
  });

  // 页码变化时保存到localStorage
  useEffect(() => {
    localStorage.setItem('currentPage', page.toString());
  }, [page]);

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

  const fetchData = () => {
    console.log(`获取第${page}页数据`);
  };

  return (
    <div>
      {/* 你的列表内容 */}
      <CustomPagination setPage={setPage} page={page} />
    </div>
  );
};

export default Home;

方案对比 #

• URL参数方案：支持浏览器前进后退、页面刷新、分享链接，完全符合网页浏览的常规体验。
• localStorage方案：页码不会暴露在URL中，但刷新或重新打开页面会保留上次的页码，适合不需要分享的内部系统场景。

内容的提问来源于stack exchange，提问作者Yash Bhanushali