React Router v6中并行Routes场景下迁移至RouterProvider的方法

我们正尝试在 React Router DOM v6 中迁移至 RouterProvider 以使用 Data API（包括 ScrollRestoration），但在处理**同一路径下渲染两个不同组件的并行 Routes**时遇到了挑战。查阅并调整了许多单 Routes 和嵌套 Routes 的示例均未成功，也难以找到类似案例，希望得到迁移指导。

现有代码 #

App.tsx

function App() {
  return (
    <div className="app">
      <TopNav />
      <div className="title">
        <Routes>
          <Route path="/support" element={<></>} />
          <Route path="/" element={<Title />} />
          <Route path="/:categoryId" element={<Title />} />
          <Route path="/:categoryId/:subcategoryId" element={<Title />} />
          <Route path="/:categoryId/:subcategoryId/:contentId" element={<Title />} />
        </Routes>
      </div>
      <SideNav />
      <div className="content">
        <div className="page-section">
          <main>
            <Routes>
              <Route path="/support" element={<Form />} />
              <Route path="/" element={<Content />} />
              <Route path="/:categoryId" element={<Content />} />
              <Route path="/:categoryId/:subcategoryId" element={<Content />} />
              <Route path="/:categoryId/:subcategoryId/:contentId" element={<Content />} />
            </Routes>
          </main>
          <Footer />
        </div>
      </div>
    </div>
  );
}

index.tsx

ReactDOM.render(
  <React.StrictMode>
    <PrismicProvider client={client}>
     <BrowserRouter>
      <App />
     </BrowserRouter>
    </PrismicProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

核心思路是将分散在两个 Routes 中的逻辑整合到单个路由配置对象，通过 Outlet 组件实现页面不同区域的并行渲染，同时适配 RouterProvider 的使用规范。

步骤1：创建集中式路由配置 #

新建 routes.tsx 文件，定义包含布局和嵌套路由的配置：

import { createBrowserRouter, Outlet } from 'react-router-dom';
import Title from './Title';
import Content from './Content';
import Form from './Form';
import TopNav from './TopNav';
import SideNav from './SideNav';
import Footer from './Footer';

// 根布局：完全保留原App的DOM结构，用Outlet划分渲染区域
const RootLayout = () => {
  return (
    <div className="app">
      <TopNav />
      <div className="title">
        {/* Title区域的渲染出口 */}
        <Outlet name="title" />
      </div>
      <SideNav />
      <div className="content">
        <div className="page-section">
          <main>
            {/* Content区域的渲染出口 */}
            <Outlet name="content" />
          </main>
          <Footer />
        </div>
      </div>
    </div>
  );
};

// 定义完整路由配置
export const router = createBrowserRouter([
  {
    element: <RootLayout />,
    children: [
      // 首页及分类路径：同时渲染Title和Content
      {
        path: '/',
        children: [
          { element: <Title />, outlet: 'title' },
          { element: <Content />, outlet: 'content' },
        ],
      },
      {
        path: '/:categoryId',
        children: [
          { element: <Title />, outlet: 'title' },
          { element: <Content />, outlet: 'content' },
        ],
      },
      {
        path: '/:categoryId/:subcategoryId',
        children: [
          { element: <Title />, outlet: 'title' },
          { element: <Content />, outlet: 'content' },
        ],
      },
      {
        path: '/:categoryId/:subcategoryId/:contentId',
        children: [
          { element: <Title />, outlet: 'title' },
          { element: <Content />, outlet: 'content' },
        ],
      },
      // Support路径：Title区域为空，Content区域渲染Form
      {
        path: '/support',
        children: [
          { element: <></>, outlet: 'title' },
          { element: <Form />, outlet: 'content' },
        ],
      },
    ],
  },
]);

步骤2：简化App.tsx #

原App组件的路由逻辑已转移到配置中，只需保留空结构：

function App() {
  return null;
}

步骤3：替换Router为RouterProvider #

修改 index.tsx，用 RouterProvider 替代 BrowserRouter 并传入路由配置：

import { RouterProvider } from 'react-router-dom';
import { router } from './routes';

ReactDOM.render(
  <React.StrictMode>
    <PrismicProvider client={client}>
      <RouterProvider router={router} />
    </PrismicProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

关键说明 #

1. 命名Outlet：通过给 Outlet 指定 name 属性，实现同一路由下不同区域渲染不同组件，完美替代原本的并行 Routes。
2. 配置集中化：所有路由规则统一管理，后续可直接添加 loader、action 等 Data API 能力，适配 RouterProvider 的设计思路。
3. 布局无改动：原页面的DOM结构和样式完全保留，仅调整路由渲染逻辑，不会影响现有页面表现。

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