react route如何传参数
React Router 传参方法
React Router 提供了多种方式传递参数，以下是常见的几种方法：
URL 参数（动态路由）
在路由配置中使用 :paramName 定义参数，组件通过 useParams 获取：
// 路由配置
<Route path="/user/:id" element={<User />} />
// 组件内获取
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}查询参数（URLSearchParams）
通过 ?key=value 形式传递，使用 useSearchParams 获取：
// 跳转时
navigate('/search?query=react');
// 组件内获取
import { useSearchParams } from 'react-router-dom';
function Search() {
const [searchParams] = useSearchParams();
const query = searchParams.get('query');
return <div>Search: {query}</div>;
}状态参数（state）
通过 navigate 的 state 选项传递对象，使用 useLocation 获取：
// 跳转时
navigate('/profile', { state: { user: 'admin' } });
// 组件内获取
import { useLocation } from 'react-router-dom';
function Profile() {
const { state } = useLocation();
return <div>User: {state.user}</div>;
}自定义参数（通过组件props） 直接通过React组件属性传递：
<Route path="/dashboard" element={<Dashboard extraData={data} />} />注意事项
- URL参数适合简单、公开的数据
- 状态参数适合敏感或复杂数据（不会暴露在URL中）
- 查询参数适合可选过滤条件
- 刷新页面时，只有URL参数和查询参数会保留
