在 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。
以你的场景为例——通过 <Link> 传递用户对象作为 state：
<Link
to="/detail"
state={c} // ✅ 正确：直接传对象（无需拼接 search）
>
查看用户详情
</Link>注意：你原代码中手动构造 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 <h1>用户信息缺失，请从有效入口进入</h1>;
}
return (
<div>
<h1>用户详情</h1>
<p><strong>姓名：</strong>{state.name}</p>
<p><strong>ID：</strong>{state.id}</p>
<p><strong>邮箱：</strong>{state.email}</p>
</div>
);
}
export default Detail;⚠️ 重要注意事项：
- state 仅在客户端导航（如 <Link> 或 navigate()）时有效；直接刷新页面或书签访问时，state 会丢失（这是浏览器原生行为，React Router 无法持久化）；
- 若需持久化参数（如支持刷新后仍可用），应改用 URL 查询参数（search）配合 URLSearchParams 解析，或结合 useSearchParams Hook；
- useLocation() 返回的对象是响应式的——当路由变化时，组件会自动重新渲染，无需手动监听；
- 切勿在非组件函数或条件逻辑中调用 Hook（遵守 Hook 规则）。
总结：告别 props.location，拥抱 useLocation() —— 这是 React Router v6 的标准实践。结合 <Link to={{ pathname, state }}> 的声明式导航，即可安全、简洁地传递复杂数据，同时保持代码清晰与可维护性。
