React中useLocation的state属性为undefined问题排查

可能的原因及解决方案 #

1. 路由未正确包裹在Router组件内 #

确保目标组件所在的所有路由代码，都被BrowserRouter（或HashRouter等Router类型）完全包裹。如果组件脱离了Router上下文，useLocation无法获取到正确的路由状态，state自然会是undefined。示例路由配置：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Demo from './Demo';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:transfer" element={<Demo />} />
        {/* 其他路由 */}
      </Routes>
    </BrowserRouter>
  );
}

2. 页面刷新导致state丢失 #

state是存储在浏览器history栈的内存中的，跳转后手动刷新页面会直接清空state。确认你是通过点击Link组件完成跳转，而非跳转后手动刷新页面。

3. 路由路径与Link的pathname不匹配 #

检查路由配置的路径是否和Link的pathname完全对应。比如你的路由定义是/users/:transfer，那么Link的pathname必须是/users/xxx格式，否则路由匹配异常也可能导致state无法传递。

4. 数据本身存在问题 #

先排查原数据是否有效：在生成Link的代码中打印item，确认item.name和item.account不是undefined。如果源数据本身为空，传递的state自然也会是无效值。也可以先硬编码state测试：

<Link to={{
  pathname: `/users/test`,
  state: { name: 'test', account: '123456' }
}}> Transfer </Link>

如果此时能拿到state，说明原数据存在问题。

5. React Router版本或依赖冲突 #

确保项目中react-router和react-router-dom版本一致，且钩子函数（useParams、useLocation）都来自react-router-dom包。低版本路由可能存在写法兼容问题，建议使用稳定的v6版本。

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