react的路由参数如何传递
路由参数传递方式
在React中，路由参数传递通常通过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>;
}查询字符串参数
通过URLSearchParams或useSearchParams处理查询字符串：
// 导航跳转
navigate(`/search?query=${term}&page=1`);
// 组件内获取
import { useSearchParams } from 'react-router-dom';
function SearchPage() {
const [searchParams] = useSearchParams();
const query = searchParams.get('query');
const page = searchParams.get('page');
}状态参数
通过state属性传递对象参数，不会显示在URL中：
// 导航跳转
navigate('/profile', {
state: { fromDashboard: true }
});
// 组件内获取
import { useLocation } from 'react-router-dom';
function ProfilePage() {
const { state } = useLocation();
const fromDashboard = state?.fromDashboard;
}编程式导航参数
通过useNavigate进行编程式导航时传递参数：
const navigate = useNavigate();
navigate('/checkout', {
state: { items: cartItems },
replace: true
});路由配置参数
在路由配置中直接传递props：
<Route
path="/admin"
element={<AdminPage extraProp="value" />}
/>每种方式适用于不同场景：路径参数适合必要标识，查询参数适合可选过滤条件，状态参数适合敏感或复杂数据。React Router v6以上版本推荐使用这些Hooks API进行参数处理。
