React Router v6 中如何正确访问路由位置信息（location）

心靈之曲 2026-01-20 00:00:00 次阅读

在 react router v6 中，`props.location` 不再自动注入组件，需改用 `uselocation()` hook 获取当前路由的 location 对象（含 `pathname`、`search`、`state` 等），否则将返回 `undefined`。

React Router v6 彻底移除了旧版中通过 props 传递 location、history 和 match 的机制，转而全面采用 Hooks API。这意味着：任何函数组件若需访问路由状态（如 URL 参数、查询字符串或导航时携带的 state），都必须显式调用 useLocation()、useNavigate() 或 useParams() 等 Hook。

以你的场景为例——通过传递用户对象作为 state：


  查看用户详情

注意：你原代码中手动构造 search: '?name=...' 并非必需；state 是更安全、更推荐的方式——它不会暴露在 URL 中，支持任意可序列化数据（如完整用户对象），且不会触发服务端解析或 SEO 索引问题。

在目标组件 Detail 中，应使用 useLocation() 获取该 state：

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

function Detail() {
  const { state } = useLocation(); // ✅ 解构获取传递的 state

  console.log('传递的用户数据:', state); // 如 { name: "Alice", id: 123, email: "a@example.com" }

  // 安全访问，防止未定义错误
  if (!state) {
    return 用户信息缺失，请从有效入口进入;
  }

  return (
    
      用户详情
      姓名：{state.name}
      ID：{state.id}
      邮箱：{state.email}
    
  );
}

export default Detail;

⚠️ 重要注意事项：

state 仅在客户端导航（如或 navigate()）时有效；直接刷新页面或书签访问时，state 会丢失（这是浏览器原生行为，React Router 无法持久化）；
若需持久化参数（如支持刷新后仍可用），应改用 URL 查询参数（search）配合 URLSearchParams 解析，或结合 useSearchParams Hook；
useLocation() 返回的对象是响应式的——当路由变化时，组件会自动重新渲染，无需手动监听；
切勿在非组件函数或条件逻辑中调用 Hook（遵守 Hook 规则）。

总结：告别 props.location，拥抱 useLocation() —— 这是 React Router v6 的标准实践。结合的声明式导航，即可安全、简洁地传递复杂数据，同时保持代码清晰与可维护性。