react路由如何带多个参数
路由配置
在React Router中，可以通过路由配置的path属性定义多个参数。参数以冒号:开头，例如/user/:id/:name表示匹配id和name两个动态参数。
<Route path="/user/:id/:name" component={UserPage} />获取参数
在组件中通过useParams钩子获取路由参数。返回的对象包含所有动态参数键值对。
import { useParams } from 'react-router-dom';
function UserPage() {
const { id, name } = useParams();
return <div>ID: {id}, Name: {name}</div>;
}可选参数
通过添加问号?将参数标记为可选。例如/search/:query?允许query参数为空。
<Route path="/search/:query?" component={SearchPage} />编程式导航
使用useNavigate钩子或Link组件传递多参数。参数会以URL形式体现。
// 使用Link组件
<Link to="/user/123/john">User Profile</Link>
// 使用navigate函数
const navigate = useNavigate();
navigate('/user/123/john');查询字符串
通过useSearchParams处理查询参数。与动态参数不同，查询字符串以?key=value形式附加在URL末尾。
import { useSearchParams } from 'react-router-dom';
function SearchPage() {
const [searchParams] = useSearchParams();
const query = searchParams.get('q');
const sort = searchParams.get('sort');
}嵌套参数
在嵌套路由中，每个层级的组件可以访问自己的参数。父路由参数通过useParams在子组件中仍可获取。
<Route path="/posts/:postId" element={<PostLayout />}>
<Route path="comments/:commentId" element={<CommentPage />} />
</Route>
