React Router从v5升级到v6，如何用相对路径实现嵌套路由？

核心适配要点 #

React Router v6 对路由机制做了不少调整，针对你原v5的嵌套路由、分散配置、多路径/正则匹配场景，关键适配点如下：

• 用 <Routes> 替代 <Switch>，默认启用精准匹配（无需再写exact）
• 嵌套路由需在父路由路径末尾加/*，确保子路由能匹配后续路径段
• 多路径匹配支持直接传入数组（如path={['/', '/2', '/more-info']}）
• 移除了正则路径支持，原正则匹配需拆分为多个独立路由
• 路由分散配置的模式依然保留，组件内可独立定义路由规则

分步代码改造 #

1. App.js 改造

替换<Switch>为<Routes>，拆分原正则路径为多个路由，用<Navigate>替代<Redirect>：

import { Routes, Route, Navigate } from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* 多路径匹配登录页，v6支持数组形式 */}
      <Route path={['/', '/2', '/more-info']} element={<Login />} />
      {/* 原正则路径拆分为3个路由，统一指向AuthenticatedUser组件，末尾加/*支持嵌套子路由 */}
      <Route path="/main/*" element={<AuthenticatedUser />} />
      <Route path="/settings/*" element={<AuthenticatedUser />} />
      <Route path="/notifications/*" element={<AuthenticatedUser />} />
      {/* 404兜底路由 */}
      <Route path="*" element={<Navigate to="/404" replace />} />
    </Routes>
  );
}

2. AuthenticatedUser.js 改造

内部保留独立路由配置，替换<Switch>为<Routes>，示例用绝对路径对齐原逻辑，也可改用相对路径简化：

import { Routes, Route } from 'react-router-dom';

function AuthenticatedUser() {
  // 保留原有公共逻辑与HTML结构
  return (
    <div>
      {/* 公共HTML内容 */}
      <Routes>
        {/* 精准匹配/main路径 */}
        <Route path="/main" element={<Main />} />
        {/* /settings路径指向Settings组件，末尾加/*支持其内部嵌套路由 */}
        <Route path="/settings/*" element={<Settings />} />
        {/* 精准匹配/notifications路径 */}
        <Route path="/notifications" element={<Notifications />} />
      </Routes>
    </div>
  );
}

3. Settings.js 改造

改用相对路径定义子路由，简化配置：

import { Routes, Route } from 'react-router-dom';

function Settings() {
  // 保留原有公共逻辑与HTML结构
  return (
    <div>
      {/* 公共HTML内容 */}
      <Routes>
        {/* 相对路径匹配/settings/basic */}
        <Route path="basic" element={<Basic />} />
        {/* 相对路径匹配/settings/notifications */}
        <Route path="notifications" element={<Notifications />} />
      </Routes>
    </div>
  );
}

关于分散路由的说明 #

v6完全支持路由规则分散在各组件中定义，无需集中到单一配置文件：

• 组件内可直接嵌套<Routes>和<Route>，既可以用绝对路径匹配全局路由，也可以基于父路由路径用相对路径简化配置
• 父路由需确保路径末尾带有/*，才能让内部子路由正常匹配后续路径段

内容的提问来源于stack exchange，提问作者Gabrielle