React-Router-Dom v5迁移至v6路由结构问题求助

问题根源 #

页面无内容渲染主要有两个核心原因：

1. 路由匹配顺序错误：v6 的 <Routes> 组件按从上到下顺序匹配路由，你把 /main 的重定向路由放在了渲染 <SomePage> 的路由前面，导致访问 /main 时直接跳转，永远不会触发 <SomePage> 的渲染。
2. 子路由路径不匹配：v6 严格遵循路由层级，你原有的子路由使用绝对路径（如 /some/path），但主路由中没有对应路径的路由挂载 <SomePage>，导致子路由找不到父组件容器，自然无法渲染内容。

正确迁移步骤 #

1. 修正主路由组件

主路由负责顶层路由的重定向和父路由挂载，调整路由顺序并使用嵌套路由写法：

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

function MainRoutes() {
  return (
    <Routes>
      {/* 根路径直接跳转到带父层级的子路由 */}
      <Route path="/" element={<Navigate to="/main/some/path" />} />
      
      {/* 挂载 /main 父路由，渲染 SomePage */}
      <Route path="/main" element={<SomePage />}>
        {/* 访问 /main 根路径时，跳转到默认子路由 */}
        <Route index element={<Navigate to="some/path" />} />
      </Route>
      
      {/* 兼容原有直接访问子路由的路径，自动跳转到带父层级的路径 */}
      <Route path="/some/path" element={<Navigate to="/main/some/path" />} />
      <Route path="/some/other" element={<Navigate to="/main/some/other" />} />
      <Route path="/some/last" element={<Navigate to="/main/some/last" />} />
    </Routes>
  );
}

2. 修正 SomePage 组件

SomePage 管理自身子路由，需做三处调整：

• 将 <Switch> 替换为 v6 的 <Routes>
• 子路由使用相对路径（去掉开头的 /）
• 将 component 属性改为 element 属性，传入组件实例

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

function SomePage() {
  return (
    <>
      <Tabs />
      <Routes>
        {/* 相对路径，对应 /main/some/path */}
        <Route path="some/path" element={<MyComponent />} />
        {/* 相对路径，对应 /main/some/other */}
        <Route path="some/other" element={<OtherComponent />} />
        {/* 相对路径，对应 /main/some/last */}
        <Route path="some/last" element={<LastComponent />} />
      </Routes>
    </>
  );
}

关键说明 #

• v6 中 <Routes> 完全替代 <Switch>，且路由匹配为严格匹配，必须保证路径层级完全对应。
• 嵌套路由使用相对路径可避免硬编码父路径，让子路由更灵活易维护。
• 主路由中的 <Route index> 专门用于匹配父路由的根路径（即 /main），实现默认跳转逻辑，无需重复定义相同路径。

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