v6路由部署优化

v6路由部署优化踩坑记录

最近项目从React Router v5升级到v6，部署过程中遇到了不少坑，记录一下优化方案。

问题背景

升级后发现路由匹配出现问题，特别是动态路由和嵌套路由。在本地开发环境一切正常，但部署到生产环境后就出现了404错误。

核心问题定位

通过排查发现，主要问题出在以下几点：

1. 路径匹配规则变更：v6中<Route>组件的path属性不再支持模糊匹配
2. 嵌套路由配置错误：子路由的path需要相对于父路由进行配置
3. 部署路径配置不当：静态资源路径未正确设置

具体解决方案

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

// v6正确写法
<Routes>
  <Route path="/user/:id" element={<UserPage />} />
</Routes>

// 嵌套路由示例
<Routes>
  <Route path="/dashboard" element={<Dashboard />}>    
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

部署优化步骤

1. 确保basename配置正确
2. 使用createBrowserRouter替代createRoutesFromChildren
3. 检查webpack配置中的publicPath设置
4. 验证所有路由组件的导入路径是否正确

部署后通过浏览器控制台和网络面板逐一排查，最终解决了路由不匹配的问题。