React Router v6.8：如何在多Outlet中渲染嵌套路由

问题描述 #

我使用React Router 6.8构建了一个React应用，当前路由结构如下：

const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<RootLayout />} errorElement={<Error />}>
        <Route path="motive">
          <Route
            path=":motiveSlug"
            element={<MotiveSingle />}>
            <Route path="artist">
              <Route
                path=":artistSlug"
                element={<ArtistSingle />}
              />
            </Route>
          </Route>
        </Route>
      </Route>
    )
  );

需要实现以下布局渲染逻辑：

<div id="configurator">
 {/* 将 MotiveSingle 渲染到此处 */}
</div>
<div id="content">
 {/* 点击MotiveSingle中的艺术家链接后，将 ArtistSingle 渲染到此处 */}
</div>

实现方案 #

要实现不同路由组件在页面独立区域渲染的效果，核心是利用React Router 6的命名Outlet功能，具体步骤如下：

1. 改造根布局组件（RootLayout） #

在根布局中定义两个命名的Outlet，分别对应页面的configurator和content区域：

// RootLayout.jsx
import { Outlet } from 'react-router-dom';

export default function RootLayout() {
  return (
    <div className="app-container">
      <div id="configurator">
        <Outlet name="configurator" />
      </div>
      <div id="content">
        <Outlet name="content" />
      </div>
    </div>
  );
}

2. 调整路由配置，指定组件的渲染目标 #

修改路由结构，给每个路由组件指定对应的渲染Outlet：

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />} errorElement={<Error />}>
      {/* 将MotiveSingle渲染到configurator Outlet */}
      <Route 
        path="motive/:motiveSlug" 
        element={<MotiveSingle />} 
        outlet="configurator"
      >
        {/* 将ArtistSingle渲染到content Outlet */}
        <Route 
          path="artist/:artistSlug" 
          element={<ArtistSingle />} 
          outlet="content"
        />
      </Route>
    </Route>
  )
);

也可以通过嵌套的命名Outlet组件来实现，写法如下：

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />} errorElement={<Error />}>
      <Route 
        path="motive/:motiveSlug" 
        element={<Outlet name="configurator" element={<MotiveSingle />} />}
      >
        <Route 
          path="artist/:artistSlug" 
          element={<Outlet name="content" element={<ArtistSingle />} />}
        />
      </Route>
    </Route>
  )
);

3. 配置MotiveSingle中的导航链接 #

在MotiveSingle组件中，使用Link组件生成符合路由规则的艺术家跳转链接：

// MotiveSingle.jsx
import { Link, useParams } from 'react-router-dom';

export default function MotiveSingle() {
  const { motiveSlug } = useParams();
  // 示例艺术家数据
  const artist = { slug: 'vincent-van-gogh', name: '文森特·梵高' };

  return (
    <div>
      <h3>作品：{motiveSlug}</h3>
      <p>艺术家：<Link to={`artist/${artist.slug}`}>{artist.name}</Link></p>
    </div>
  );
}

核心逻辑说明 #

命名Outlet允许在布局中定义多个独立的渲染出口，子路由通过outlet属性或嵌套命名Outlet指定渲染目标，从而实现不同层级路由组件在页面不同区域的独立渲染，完美匹配需求中的布局场景。

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