react中link传值如何获取
在 React 中通过 Link 传值并获取
在 React 应用中，Link 组件通常用于导航，传值方式主要有两种：URL 参数（params）和查询参数（query）。以下是具体实现方法：
通过 URL 参数传值
使用动态路由（如 React Router v6）传递参数，目标页面通过 useParams 获取。
传递参数：
import { Link } from 'react-router-dom';
<Link to="/user/123">用户详情</Link>路由需配置动态参数：
<Route path="/user/:id" element={<UserPage />} />获取参数：
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
return <div>用户ID: {id}</div>;
}通过查询参数传值
使用 URLSearchParams 或 useLocation 解析查询字符串。
传递参数：
<Link to="/user?name=John&age=25">用户信息</Link>获取参数：
import { useLocation } from 'react-router-dom';
function UserPage() {
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const name = searchParams.get('name');
const age = searchParams.get('age');
return <div>姓名: {name}, 年龄: {age}</div>;
}通过 state 属性传值
通过 Link 的 state 传递对象，目标页面用 useLocation 获取。
传递参数：
<Link
to="/user"
state={{ name: 'John', age: 25 }}
>
用户信息
</Link>获取参数：
import { useLocation } from 'react-router-dom';
function UserPage() {
const { state } = useLocation();
return <div>姓名: {state.name}, 年龄: {state.age}</div>;
}注意事项
- URL 参数适合简单、公开的数据，如 ID。
- 查询参数适合可选或过滤条件，如搜索关键词。
- state 适合复杂或敏感数据，但刷新页面后
state会丢失。
根据需求选择合适的传值方式即可。
