React Router同路径不同参数页面刷新与state传递问题

核心问题分析 #

你遇到的是React Router同路径不同参数时组件复用导致的“不刷新”问题，而使用reloadDocument会触发整页刷新，丢失React Router存在内存中的state——因为页面刷新后内存数据被清空，自然拿不到state。

方案一：监听路由参数变化（推荐） #

不需要强制刷新页面，而是让组件主动监听路由参数的变化，触发对应逻辑更新：

1. 保留原Link写法，移除reloadDocument属性：

<Link to={`/samelocation/${id}`} state={{ state1: 'hello' }}>跳转</Link>

2. 在ConsoleLogPage组件中，通过useParams获取路由参数，并用useEffect监听参数变化：

import { useParams, useLocation, useEffect } from 'react-router-dom';

function ConsoleLogPage() {
  const { id } = useParams();
  const location = useLocation();

  useEffect(() => {
    // 当id变化时执行需要刷新的逻辑，比如打印state
    console.log(location.state?.state1 || null);
  }, [id, location.state]); // 监听id和state的变化

  return <div>当前ID：{id}</div>;
}

方案二：通过key强制组件重新挂载 #

如果希望组件完全重新挂载（模拟“新页面”效果），可以给路由对应的组件添加key属性，让React认为不同参数是不同的组件实例：
修改路由配置：

<Routes>
  <Route 
    path='/samelocation/:id' 
    element={<ConsoleLogPage key={window.location.pathname} />} 
  />
</Routes>

这种方式下，每个不同的id路径都会触发组件重新挂载，同时state能正常传递，无需使用reloadDocument。

为什么reloadDocument会丢失state？ #

React Router的state存储在浏览器的内存历史栈中，而非URL里。当使用reloadDocument时，浏览器会发起新的页面请求，内存中的历史栈数据被清空，因此location.state会变为null。

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