使用react-router-dom v6渲染具有不同布局/元素的组件：我怎样才能实现这一点？

Question

我在编写代码来呈现没有导航栏和侧边栏的登录页面时遇到问题。我遇到过一些提出类似问题的页面，但似乎都不适合我目前的情况。

如何在反应路由器的登录页面中隐藏导航栏 给出的例子很棒，但我相信完成相同任务的方式已经随着react-router-dom v6而改变了，这让我在https://dev.to/iamandrewluca/private-route-in-react-中阅读了有关此更改的信息路由器-v6-lg5

看来我不理解有关 React Router 路由的某些方面。在下面的代码中我有两条路线。我希望在没有导航栏和侧栏组件的情况下渲染路线之一（登录）。

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
      </Routes>

      <NavBar />
      <SideBar />
      <main className={styles["main--container"]}>
        <div className={styles["main--content"]}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
          </Routes>
        </div>
      </main>
    </>
  );
};

我也尝试过的另一种选择是将导航栏和侧栏标签移到仪表板组件中，但随后我基本上必须对任何新组件进行相同的复制和粘贴。这种方法感觉错误且效率低下，但如果这是正确的方法，我会做必要的事情

编辑：我认为重要的是包括它当前所做的事情是加载包含导航栏和侧边栏的登录页面。导航到仪表板组件有导航栏和侧边栏，但这是有意的。 我希望登录页面没有导航栏和侧边栏

Answer 1

隐藏导航栏的最简单方法是转到登录页面组件并调用 useLocation()。然后，在声明使用位置后，您将执行类似的操作。并将其分配给可变位置 { location.pathname === "/login" ?空：（

渲染整个导航栏组件）；

如果你能在我用手机打字时阅读，那就不行了

Answer 2

如果我理解您的问题，您希望在非登录路线上呈现导航和侧边栏。为此，您可以创建一个布局组件来呈现它们和嵌套路由的出口。

使用嵌套路由

import { Outlet } from 'react-router-dom';

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles["main--container"]}>
      <div className={styles["main--content"]}>
        <Outlet /> // <-- nested routes rendered here
      </div>
    </main>
  </>
);

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route element={<AppLayout />} >
          <Route path="/" element={<Dashboard />} /> // <-- nested routes
        </Route>
      </Routes>
    </>
  );
};

使用路由配置和 useRoutes 挂钩

const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];

...

import { useRoutes } from 'react-router-dom';

const App = () => {
  const routes = useRoutes(routesConfig);

  return routes;
};

使用路由配置和数据路由器（在 v6.4.0 中引入）

const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];

...

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter(routesConfig);

const App = () => {
  return <RouterProvider router={router} />;
};