在 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 (
);
}
export default Detail;
⚠️ 重要注意事项：
- state 仅在客户端导航（如 或 navigate()）时有效；直接刷新页面或书签访问时，state 会丢失（这是浏览器原生行为，React Router 无法持久化）；
- 若需持久化参数（如支持刷新后仍可用），应改用 URL 查询参数（search）配合 URLSearchParams 解析，或结合 useSearchParams Hook；
- useLocation() 返回的对象是响应式的——当路由变化时，组件会自动重新渲染，无需手动监听；
- 切勿在非组件函数或条件逻辑中调用 Hook（遵守 Hook 规则）。
总结：告别 props.location，拥抱 useLocation() —— 这是 React Router v6 的标准实践。结合 的声明式导航，即可安全、简洁地传递复杂数据，同时保持代码清晰与可维护性。
