javascript 如何在多个插座中呈现嵌套路由(react router v6.8)

13z8s7eq 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(120)

我用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">
 {/* Outlet MotiveSingle */}
</div>
<div id="content">
 {/* Outlet ArtistSingle */}
</div>

我想在#configurator中渲染MotiveSingle。动机细节包含艺术家。单击艺术家链接后，我想在#content中渲染ArtistSingle。
我如何才能实现MotiveSingle在#configurator中渲染，ArtistSingle在#content中渲染？
以下是您可以观看的现场演示：https://codesandbox.io/s/multiple-outlets-in-nested-routes-ckumkk
以下是布局图，以便更好地理解：

JavaScript

来源：https://stackoverflow.com/questions/75735376/how-to-render-nested-routes-in-multiple-outlets-react-router-v6-8

1条答案

按热度按时间

jv4diomz1#

您可以稍微简化路由，只需添加一个Motive布局路由就可以实现我认为您所描述的内容。主要问题是每个Route组件只有一个嵌套路由的children prop/集，因此它们只能被渲染成单个Outlet分量。这是修复我只是渲染MotiveSingle直接在布局路线，而不是额外的Outlet。
示例：

function RootLayout() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <NavLink to="/">Home</NavLink>
          </li>
          <li>
            <NavLink to="motive/motive-1">Motive 1</NavLink>
          </li>
          <li>
            <NavLink to="motive/motive-2">Motive 2</NavLink>
          </li>
          <li>
            <NavLink to="motive/motive-3">Motive 3</NavLink>
          </li>
        </ul>
      </nav>

      <hr />

      <main>
        <Outlet />
      </main>
    </div>
  );
}

const MotiveLayout = () => (
  <>
    <div id="configurator">
      <i>Configurator</i>
      <MotiveSingle />
    </div>
    <hr />
    <div id="content">
      <i>Content</i>
      {/* Outlet for ArtistSingle */}
      <Outlet />
    </div>
  </>
);

export default function App() {
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<RootLayout />} errorElement={<Error />}>
        <Route path="motive/:motiveSlug" element={<MotiveLayout />}>
          <Route path="artist/:artistSlug" element={<ArtistSingle />} />
        </Route>
      </Route>
    )
  );
  return <RouterProvider router={router} />;
}

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 如何在多个插座中呈现嵌套路由(react router v6.8)

1条答案

相关问题

热门标签

最新问答