如何在 React Router v6 中为不同的布局路由呈现相同的路径？答案

【问题标题】：How to render the same path for different layout-routes in React Router v6?如何在 React Router v6 中为不同的布局路由呈现相同的路径？
【发布时间】：2023-02-10 01:09:57
【问题描述】：

我正在尝试为两种不同的布局路线呈现特定路线。基本上这条路线必须为公共和私人布局呈现，但具有相同的路径。

像这样的东西

createBrowserRouter([
  {
    element: <PublicLayout />,
    children: [
      // other routes in public layout
      {
        path: '/legal/*',
        element: <Legal />,
      },
    ],
  },
  {
    element: <PrivateLayout />,
    children: [
      // other routes in private layout
      {
        path: '/legal/*',
        element: <Legal />,
      },
    ],
  },
])

Legal 组件适用于两种布局，但在此配置中只会呈现公共布局。路径中的 splat 是因为 Legal 有后代路由。

我试过一个包装器组件，但它就是不呈现。

export default function LegalRouter() {
  const isOnline = true

  return (
    <Routes>
      <Route element={isOnline ? <Layout /> : <PublicLayout />}>
        <Route element={<Legal />} />
      </Route>
    </Routes>
  )
}

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

您不能在同一 Routes 组件内的同一路径上呈现两条路线，因此您可能需要抽象一个新的有条件地呈现“公共”或“私有”包装器组件的路由保护组件。你不能直接在这里使用PublicLayout和PrivateLayout，因为你不想做任何重定向，而只是想换出用户界面，例如每个的“UI/布局”组件。

例子：

const PublicPrivateLayout = () => {
  const /* condition */ = /* compute condition value */;

  const Wrapper = /* condition */ ? PublicWrapper : PrivateWrapper;

  return (
    <Wrapper>
      <Outlet />
    </Wrapper>
  );
};

createBrowserRouter([
  {
    element: <PublicLayout />,
    children: [
      // public-only routes
    ],
  },
  {
    element: <PrivateLayout />,
    children: [
      // private-only routes
    ],
  },
  {
    element: <PublicPrivateLayout />,
    children: [
      // public or private routes
      {
        path: '/legal/*',
        element: <Legal />,
      },
    ],
  },
]);

【讨论】：