react route如何传参数
路由参数传递方式
在React Router中传递参数主要通过以下三种方式实现：
URL参数（动态路由）
通过冒号:在路由路径中定义参数，组件通过useParams钩子获取：
// 路由配置
<Route path="/user/:id" element={<UserPage />} />
// 组件内获取
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}查询参数（Query String）
使用URLSearchParams或第三方库处理查询字符串：
// 跳转时传递
navigate(`/search?keyword=${value}&page=1`);
// 组件内获取
import { useSearchParams } from 'react-router-dom';
function SearchPage() {
const [searchParams] = useSearchParams();
const keyword = searchParams.get('keyword');
const page = searchParams.get('page');
}状态参数（State Object）
通过navigate的state选项传递对象，适合敏感或复杂数据：
// 跳转时传递
navigate('/profile', {
state: {
userToken: 'abc123',
fromDashboard: true
}
});
// 组件内获取
import { useLocation } from 'react-router-dom';
function ProfilePage() {
const { state } = useLocation();
const token = state?.userToken;
}参数类型选择建议
- 公开可分享的链接使用URL参数或查询参数
- 临时数据或敏感信息使用状态参数
- 分页/筛选场景适合查询参数
- 详情页ID适合URL参数
所有方法获取的参数都会在页面刷新后保留（state参数除外），可根据具体场景组合使用。
