最近在将项目从React Router v5升级到v6的过程中，遇到了不少兼容性问题，特此记录一下踩坑经历。
主要问题
v6版本最大的变化就是移除了Switch组件，改用Routes，但更致命的是，所有路由组件的props访问方式都变了。在v5中我们可以通过this.props.match.params.id获取参数，在v6中必须使用useParams() Hook。
具体踩坑过程
1. 路由配置变更
// v5写法
<Route path="/user/:id" component={User} />
// v6写法
<Routes>
<Route path="/user/:id" element={<User />} />
</Routes>
2. 参数获取方式改变
// v5
function User(props) {
const { id } = props.match.params;
return <div>用户ID: {id}</div>;
}
// v6
function User() {
const { id } = useParams();
return <div>用户ID: {id}</div>;
}
3. 嵌套路由问题
嵌套路由在v6中必须使用useRoutes()或直接在父组件中渲染子路由，不能像v5那样通过children属性传递。
解决方案
建议采用逐步升级策略，先统一替换所有路由配置，再逐一修改组件中的参数获取方式，避免一次修改导致大面积功能异常。
讨论