从v5到v6：React Router配置文件重构踩坑

从v5到v6：React Router配置文件重构踩坑

React Router v6的发布带来了许多重要变化，其中最显著的就是路由配置方式的重构。本文将分享在升级过程中遇到的主要问题及解决方案。

主要变化

v6版本移除了<Switch>组件，改用<Routes>，并且所有路由组件都必须包裹在<Routes>内。同时，<Route>组件的写法也发生了变化。

常见踩坑点

1. 路由嵌套配置

// v5写法
<Route path="/user" component={UserLayout}>
  <Route path="profile" component={Profile} />
</Route>

// v6写法
<Route path="/user" element={<UserLayout/>}>
  <Route path="profile" element={<Profile/>} />
</Route>

2. 嵌套路由渲染

// v5
<Route path="/dashboard">
  <Dashboard />
</Route>

// v6
<Route path="/dashboard" element={<Dashboard/>} />

实践建议

1. 逐个检查路由组件，确保正确使用element属性
2. 使用useNavigate替代history.push()
3. 注意<Outlet />在父组件中的使用

升级过程中建议先备份代码，然后逐步迁移，避免一次性改动导致的不可控问题。