v6版本升级后路由路径匹配异常排查记录

在将React Router从v5升级到v6的过程中，我们遇到了一个令人困扰的问题：某些路由路径在升级后无法正确匹配。这个问题在开发环境和生产环境都出现了，严重影响了应用的正常访问。

问题复现步骤

首先，让我们看一个典型的路由配置示例：

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

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

在v6中，我们发现当访问/user/123时，虽然路由规则正确，但组件并未渲染。通过浏览器控制台检查，发现存在以下错误信息：

Warning: A route is not being rendered because no matching route was found.

根本原因分析

经过深入排查，问题出现在以下几点：

嵌套路由配置不正确：v6中必须使用useRoutes或<Routes>包裹所有路由组件
路径参数处理差异：v6中参数获取方式从props变为useParams Hook
路由层级问题：父级路由未正确设置path=""或path="*"

解决方案

// 修复前
<Routes>
  <Route path="/user" element={<UserLayout />}>  
    <Route path="profile" element={<UserProfile />} />
  </Route>
</Routes>

// 修复后
<Routes>
  <Route path="/user" element={<UserLayout />}>  
    <Route path="profile" element={<UserProfile />} />
    <Route path="*" element={<UserProfile />} />
  </Route>
</Routes>

此外，组件内部需要修改参数获取方式：

// v5
const UserProfile = ({ match }) => {
  const id = match.params.id;
}

// v6
import { useParams } from 'react-router-dom';
const UserProfile = () => {
  const { id } = useParams();
}