React中Link组件传参异常问题求助

问题现象 #

使用React Router的Link组件通过state传递参数，跳转至/home/newtask页面后，previousPage始终返回默认值"/home"，data返回undefined。

代码回顾 #

跳转页Link组件代码 #

<Link
  to={{
    pathname: "/home/newtask",
    state: {
      previousPage: window.location.pathname,
      data: "event",
    },
  }}
  className="btn"
  style={{
    textDecoration: "inherit",
    backgroundColor: "#c5fdc8",
    width: "100px",
    cursor: isButtonDisabled ? "not-allowed" : "pointer",
  }}
>
  New Event
</Link>

目标页(newtask)获取参数代码 #

const location = useLocation();
const previousPage = location.state?.previousPage || "/home"; 
console.log(previousPage);
console.log(location.state?.data);

排查方向与解决方法 #

1. 确认是否为页面刷新导致state丢失 #

React Router的state参数存储在内存中，页面刷新后会直接丢失。如果跳转后你刷新了页面，就会触发默认值"/home"，data也会变成undefined。

验证方法：点击Link跳转后，立即查看控制台输出，不要刷新页面。如果此时参数正常，说明是刷新导致的问题。

解决方法：改用URL搜索参数传递（刷新后不会丢失）：

• 修改Link组件：

<Link
  to={{
    pathname: "/home/newtask",
    search: `?previousPage=${encodeURIComponent(window.location.pathname)}&data=event`,
  }}
  className="btn"
  style={{
    textDecoration: "inherit",
    backgroundColor: "#c5fdc8",
    width: "100px",
    cursor: isButtonDisabled ? "not-allowed" : "pointer",
  }}
>
  New Event
</Link>

• 目标页获取参数：

import { useSearchParams } from 'react-router-dom';

const [searchParams] = useSearchParams();
const previousPage = searchParams.get('previousPage') || '/home';
const data = searchParams.get('data');

console.log(previousPage);
console.log(data);

2. 检查跳转前window.location.pathname的正确性 #

如果跳转前当前页面的路径本身就是"/home"，那previousPage自然会是"/home"。

验证方法：在Link所在页面添加console.log(window.location.pathname)，确认跳转前的路径是否符合预期。

3. 确认路由配置是否匹配 #

确保目标页的路由路径与Link的pathname完全一致：

• 若使用React Router v6，路由配置示例：

import { Routes, Route } from 'react-router-dom';

// 根路由配置
<Routes>
  <Route path="/home" element={<Home />}>
    {/* 嵌套路由写法 */}
    <Route path="newtask" element={<NewTask />} />
  </Route>
  {/* 或者非嵌套写法 */}
  <Route path="/home/newtask" element={<NewTask />} />
</Routes>

如果是嵌套路由，Link的pathname也可以写成相对路径"newtask"，效果一致。

4. 检查是否有路由逻辑篡改state #

如果项目中使用了路由守卫、高阶组件或其他路由中间件，可能会修改location.state的值。可以在跳转前后打印location对象，排查是否有其他逻辑干扰。

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