React Router使用Link传递state参数失败，控制台打印state为空怎么解决？

问题复现前提 #

发送页通过Link组件state传参：

import {Link} from "react-router-dom";
// ...
<Link className="start" to={{pathname: "/game", state: {string: "something to pass"}}}>
       clickme
</Link>
// ...

接收页通过useLocation获取：

import { useLocation} from "react-router-dom";
// ...
const location = useLocation();
console.log(location.state) // 输出null/undefined
// ...

原因及对应解决方案 #

1. 跳转方式不符合要求 #

Link的state存储在当前会话的history栈中，仅通过点击Link触发的跳转才能携带state，以下场景会自动丢失state：

• 手动在地址栏输入/game路径访问
• 跳转后刷新目标页面
• 用普通<a>标签跳转访问目标路径
• 通过浏览器回退/前进按钮进入目标页（前序操作不是点击Link）
  解决方案：
• 业务流程上保证只能通过点击对应Link进入目标页
• 若需要支持刷新仍保留参数，可同时将参数存入localStorage/sessionStorage，或拼接为url query参数兜底

2. React Router v6写法不兼容 #

如果你使用的是React Router v6版本，to属性内嵌套state的写法已不被推荐，部分小版本甚至不再兼容该写法，导致state传递失败。
解决方案：
将state改为Link的独立props传递，这是v6官方标准写法：

<Link 
  className="start" 
  to="/game" 
  state={{string: "something to pass"}}
>
  clickme
</Link>

3. 调用useLocation的组件未被Router上下文包裹 #

useLocation是React Router提供的上下文钩子，必须在BrowserRouter/HashRouter包裹的组件树内调用，否则获取到的location对象不是路由上下文中的实例，state自然为空。
解决方案：
确保应用根组件外层包裹了Router，路由配置示例：

// App.jsx 根组件
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import SendPage from './SendPage' // 发送页组件
import ReceivePage from './ReceivePage' // 接收页组件

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<SendPage />} />
        <Route path="/game" element={<ReceivePage />} />
      </Routes>
    </BrowserRouter>
  )
}

4. 路由配置逻辑导致state丢失 #

如果/game路径配置了重定向规则，或者存在中间跳转逻辑，没有手动传递state，也会导致参数丢失。
解决方案：
重定向时手动携带state，示例（v6 Navigate组件）：

<Navigate to="/game" state={location.state} replace />

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