v6路由配置最佳实践总结

React Router v6路由配置最佳实践总结

从v5升级到v6后，路由配置发生了重大变化，这里记录一些踩坑心得。

主要变更点

1. 路由组件渲染方式：v6不再支持<Route component>，必须使用<Route element>
2. 嵌套路由语法：需要在父路由中使用<Outlet />组件
3. 路由配置结构：推荐使用createBrowserRouter和RouterProvider

实际迁移步骤

// v5写法（已废弃）
<Route path="/user" component={User} />

// v6写法
<Route path="/user" element={<User />} />

// 嵌套路由示例
<Routes>
  <Route path="/" element={<Layout />}> // 父路由
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="user/*" element={<User />} />
  </Route>
</Routes>

最佳实践建议

1. 使用<Outlet />组件渲染子路由内容
2. 合理组织路由层级，避免过深嵌套
3. 利用useNavigate和useParams等hooks处理导航
4. 建议统一使用createBrowserRouter进行配置

常见问题

• 错误：<Route>组件未正确包裹
• 解决：确保所有路由都包含在<Routes>或<Router>中

通过以上实践，可以有效避免v6升级过程中的常见陷阱。