使用history.replaceState后返回页面history.state丢失问题咨询

我开发了一个带无限滚动功能的应用，每次加载新数据时会用history.replaceState更新history.state来存储当前页码。控制台打印正常，能输出新页码，但跳转到其他页面再返回后，history.state变成undefined或者重置为0，使用的是Chrome浏览器。

相关代码：

const [page, setPage] = useState((history.state && history.state.page) || 0);

console.log("history.state.page " + history.state.page);

...

<SingleImage 
  newLimit={() => {
    setPage(page + 11);
    history.replaceState({ page: page + 11 }, "");
  }} 
  product={product}
  handleClickOnImageEvent={handleClickOnImageEvent}
>
</SingleImage>

问题原因 #

1. React状态与history.state不同步：useState的初始值仅在组件首次挂载时执行，当从其他页面返回导致组件卸载后重新挂载时，history.state可能还未完成恢复，初始值会直接 fallback 到0；另外setPage是异步更新，直接使用当前page变量更新history.state可能拿到的是旧状态值。
2. Chrome对history.state的存储特性：当页面被完全卸载后，Chrome不会保证自定义history.state数据的持久化，尤其是使用replaceState替换当前历史条目时，返回页面时可能无法正确恢复之前存储的state。

解决方案 #

方案1：改用pushState并监听popstate事件（推荐）

pushState会添加新的历史条目，浏览器对这类条目的state存储更稳定，配合popstate事件同步组件状态：

const [page, setPage] = useState(() => history.state?.page || 0);

// 监听浏览器前进/后退事件，同步页码状态
useEffect(() => {
  const handlePopState = (e) => {
    if (e.state?.page !== undefined) {
      setPage(e.state.page);
    }
  };

  window.addEventListener('popstate', handlePopState);
  return () => window.removeEventListener('popstate', handlePopState);
}, []);

// 更新页码逻辑
<SingleImage 
  newLimit={() => {
    const newPage = page + 11;
    setPage(newPage);
    history.pushState({ page: newPage }, "");
  }} 
  product={product}
  handleClickOnImageEvent={handleClickOnImageEvent}
>
</SingleImage>

方案2：用localStorage做兜底存储

如果必须使用replaceState，可以同时将页码存入localStorage，组件挂载时优先从history.state读取，取不到则从localStorage读取：

const [page, setPage] = useState(() => {
  const savedPage = history.state?.page ?? localStorage.getItem('infiniteScrollPage');
  return savedPage ? Number(savedPage) : 0;
});

// 更新时同步存储到localStorage
<SingleImage 
  newLimit={() => {
    const newPage = page + 11;
    setPage(newPage);
    history.replaceState({ page: newPage }, "");
    localStorage.setItem('infiniteScrollPage', newPage.toString());
  }} 
  product={product}
  handleClickOnImageEvent={handleClickOnImageEvent}
>
</SingleImage>

// 页面卸载时清除localStorage数据，避免影响其他页面
useEffect(() => {
  return () => localStorage.removeItem('infiniteScrollPage');
}, []);

方案3：用路由参数管理页码（最可靠）

将页码放在路由查询参数中（比如/products?page=11），完全通过路由参数管理状态，无需依赖history.state的持久化：

const [page, setPage] = useState(() => {
  const searchParams = new URLSearchParams(window.location.search);
  return Number(searchParams.get('page')) || 0;
});

// 更新页码时修改路由参数
<SingleImage 
  newLimit={() => {
    const newPage = page + 11;
    setPage(newPage);
    const searchParams = new URLSearchParams(window.location.search);
    searchParams.set('page', newPage.toString());
    history.replaceState({}, "", `${window.location.pathname}?${searchParams.toString()}`);
  }} 
  product={product}
  handleClickOnImageEvent={handleClickOnImageEvent}
>
</SingleImage>

内容的提问来源于stack exchange，提问作者Captai-N