路由路径优化：v6版本实践

React Router v6的路由路径优化实践

在React Router v6版本中，路由路径的处理方式发生了重大变化。从v5的<Route>组件直接嵌套，到v6的<Routes>容器配合useRoutes钩子，这种重构让路由配置更加灵活和直观。

核心变更点

1. 移除了<Switch>组件，使用<Routes>替代
2. Route组件不再自动匹配路径，需要明确指定path属性
3. 嵌套路由必须使用相对路径

优化实践示例

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

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

路径优化技巧

1. 使用useNavigate进行程序化导航
2. 利用useParams获取动态参数
3. 配置index属性实现默认路由

这种路径优化让路由结构更清晰，便于维护和扩展。