从v5到v6：React Router代码重构踩坑总结
React Router v6作为React生态中的核心路由库，在v6版本中带来了诸多重大变更，本文将分享从v5升级到v6的实战经验与常见问题。
主要变更点
1. Route组件重构 v5中使用<Route>组件时可以嵌套多层结构，而v6中必须使用<Routes>包裹所有路由组件。例如：
// v5
<Route path="/user" component={User} />
<Route path="/user/profile" component={Profile} />
// v6
<Routes>
<Route path="/user" element={<User />}>
<Route path="profile" element={<Profile />} />
</Route>
</Routes>
2. useParams Hook使用 v6中useParams只能在路由组件内部使用，若需在非路由组件中获取参数，必须通过useNavigate配合实现。
3. Link组件行为调整 <Link>组件的to属性现在必须是字符串或对象格式，并且不再支持activeClassName属性。需要使用useLocation和条件渲染来实现激活状态。
实际迁移步骤
- 全局替换
<Switch>为<Routes> - 替换所有
<Route>组件的component属性为element - 重构所有
<Link>组件的样式逻辑 - 处理嵌套路由结构
常见问题
- 路由无法匹配：检查是否正确使用了
<Routes> - 参数获取异常：确认是否在路由组件内部使用
useParams - 样式错乱：替换
activeClassName为条件渲染逻辑
升级过程中建议分步进行，确保每个模块功能正常后再进行整体测试。
讨论