React Router v6升级必踩坑：路由配置重构实战记录

React Router v6升级必踩坑：路由配置重构实战记录

从React Router v5升级到v6，是一次彻底的重构体验。本文记录了在实际项目中遇到的主要问题和解决方案。

核心变化

v6最显著的变化是Switch组件被移除，改为使用Routes组件，并且路由配置方式完全改变。此外，useRouteMatch、useHistory等hooks也被废弃。

常见问题及解决方案

1. 路由配置重构

// v5写法
<Route path="/user/:id" component={User} />
<Switch>
  <Route exact path="/" component={Home} />
</Switch>

// v6写法
<Routes>
  <Route path="/user/:id" element={<User />} />
  <Route index element={<Home />} />
</Routes>

2. 嵌套路由处理 v6中嵌套路由需要使用useRoutes或在父组件中定义子路由，不能直接在Routes中嵌套。

3. 路由跳转 useHistory被移除，改用useNavigate:

const navigate = useNavigate();
navigate('/user/123');

实践建议

升级前务必做好备份，逐步迁移，并在测试环境中验证所有路由功能。建议先从简单的路由开始，再处理复杂的嵌套路由场景。

总结

React Router v6虽然重构了API，但提供了更清晰的路由管理方式。通过合理规划和充分测试，可以顺利完成升级。