从v5到v6：React Router部署环境适配踩坑

从v5到v6：React Router部署环境适配踩坑

React Router v6的发布带来了许多重大变化，其中最显著的就是路由组件的重构和API的简化。在升级过程中，我们遇到了不少部署环境适配的问题，今天就来分享一下我们的踩坑经历。

主要变化与问题

1. Route组件重构 v5中可以使用<Route>组件直接嵌套，而v6则要求使用<Routes>容器包裹所有路由组件。这在开发环境可能不会立即发现问题，但在生产部署时会因为构建工具的差异导致路由不匹配。

2. 嵌套路由配置

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

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

3. 环境变量适配 部署时发现生产环境的路由匹配异常，最终定位到是由于basename配置问题。v6中需要在BrowserRouter中明确设置：

<BrowserRouter basename={process.env.PUBLIC_URL || ''}>
  <App />
</BrowserRouter>

解决方案

1. 检查所有路由组件是否正确包裹在<Routes>中
2. 验证环境变量配置是否正确设置basename
3. 使用useNavigate替代history.push()进行路由跳转
4. 重新测试所有嵌套路由的渲染逻辑

通过以上调整，我们成功完成了v6版本的部署适配。建议在升级前先在测试环境充分验证路由逻辑。