React Router v6路由参数解析与处理
React Router v6作为新一代路由解决方案，在参数处理方面带来了显著变化。本文将详细解析v6版本中路由参数的获取与处理方式。
参数获取方式变化
在v6中，useParams() Hook成为获取路由参数的主要方式。与v5的this.props.match.params不同，v6采用函数式编程风格，通过hooks直接获取参数：
import { useParams } from 'react-router-dom';
function User() {
const params = useParams();
console.log(params.id); // 获取 :id 参数
return <div>User ID: {params.id}</div>;
}
嵌套路由参数处理
对于嵌套路由，v6保持了清晰的参数传递机制。在父路由中定义参数后，子路由可以正常访问：
// 父路由
<Route path="/user/:userId" element={<UserLayout />}>
<Route path="profile" element={<Profile />} />
</Route>
// 子组件中获取父级参数
function Profile() {
const { userId } = useParams();
return <div>Profile for user: {userId}</div>;
}
查询参数处理
v6不再内置查询参数解析，需要手动集成：
import { useSearchParams } from 'react-router-dom';
function ProductList() {
const [searchParams] = useSearchParams();
const category = searchParams.get('category');
const page = searchParams.get('page') || 1;
return <div>Category: {category}, Page: {page}</div>;
}
实际迁移步骤
- 替换所有
this.props.match.params为useParams() - 移除
withRouter高阶组件使用 - 更新路由配置中的参数获取逻辑
- 重构查询参数处理逻辑
v6版本的参数处理更加直观，但需要开发者适应新的函数式编程范式。
讨论