v6路由表优化

v6路由表优化踩坑记录

从v5升级到v6后，路由表优化成了一个大坑。原本的路由配置在v6中完全不兼容了。

问题重现

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

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

核心优化点

1. 路由嵌套：v6强制使用useRoutes或Routes组件，不再支持嵌套路由
2. 参数获取：match.params改为useParams()钩子
3. 重定向：<Redirect>被Navigate替代

实际优化代码

// 优化前
const routes = [
  { path: '/user', component: UserList },
  { path: '/user/:id', component: User }
]

// 优化后
function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="user">
          <Route index element={<UserList />} />
          <Route path=":id" element={<User />} />
        </Route>
      </Route>
    </Routes>
  )
}

注意事项

• v6中必须使用element属性替换component
• 嵌套路由需要在父路由中用<Outlet />渲染子路由
• useNavigate替代history.push

升级后路由表清晰度提升，但迁移成本不小。