v6版本升级后路由路径匹配优化记录

MeanFiona +0/-0 0 0 正常 2025-12-24T07:01:19 React Router

v6版本升级后路由路径匹配优化记录

最近在将项目从React Router v5升级到v6的过程中，遇到了一个令人头疼的路由匹配问题。升级后发现原本正常的路由路径出现了意外匹配，特别是在使用嵌套路由时。

问题复现步骤

首先创建了一个基础路由结构：

<Routes>
  <Route path="/user" element={<User/>}>
    <Route path="profile" element={<Profile/>} />
    <Route path="settings" element={<Settings/>} />
  </Route>
</Routes>

在v5中，访问/user/profile会正确匹配到User组件内的Profile子路由。但升级到v6后，发现即使访问/user根路径，也会同时渲染User和Profile组件。

根本原因分析

通过查阅官方文档才发现，v6对路由嵌套的处理方式发生了重大变化。在v5中，嵌套路由是通过<Route>标签的嵌套来实现的，而v6则要求必须使用Outlet组件来明确指定子路由的渲染位置。

解决方案

正确的写法应该是：

function User() {
  return (
    <div>
      <h1>User</h1>
      <Outlet />
    </div>
  )
}

<Routes>
  <Route path="/user" element={<User/>}>
    <Route path="profile" element={<Profile/>} />
    <Route path="settings" element={<Settings/>} />
  </Route>
</Routes>

这样修改后，路由匹配就恢复正常了。建议在升级前一定要仔细阅读官方迁移指南，避免踩到这些坑。