Rendern von Komponenten mit unterschiedlichen Layouts/Elementen mit React-Router-Dom v6: Wie kann ich das erreichen?

Question

Ich habe Probleme beim Schreiben von Code zum Rendern einer Anmeldeseite ohne Navigationsleiste und Seitenleiste. Ich bin auf ein paar Seiten gestoßen, auf denen ähnliche Fragen gestellt wurden, aber keine scheint zu meiner aktuellen Situation zu passen.

So verbergen Sie die Navigationsleiste auf der Anmeldeseite des React-Routers Die angegebenen Beispiele sind großartig, aber ich glaube, dass sich die Art und Weise, dieselbe Aufgabe zu erfüllen, mit „react-router-dom v6“ geändert hat, was mich zu https://dev.to/iamandrewluca/private-route-in-react-Lesen führt diese Änderung in router-v6-lg5

Sieht so aus, als ob ich etwas über das React Router-Routing nicht verstehe. Im folgenden Code habe ich zwei Routen. Ich möchte eine der Routen (Anmeldung) ohne Navigationsleisten- und Seitenleistenkomponenten rendern.

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>
    </>
  );
};

Eine andere Option, die ich ebenfalls ausprobiert habe, bestand darin, die Navigationsleisten- und Seitenleistenbeschriftungen in eine Dashboard-Komponente zu verschieben, aber dann muss ich im Grunde das gleiche Kopieren und Einfügen mit jeder neuen Komponente durchführen. Dieser Ansatz fühlt sich falsch und ineffizient an, aber wenn es der richtige Ansatz ist, werde ich das Notwendige tun

BEARBEITEN: Ich denke, es ist wichtig einzubeziehen, dass es derzeit nur die Anmeldeseite lädt, die die Navigationsleiste und die Seitenleiste enthält. Die Komponente „Navigation zum Dashboard“ verfügt über eine Navigationsleiste und eine Seitenleiste, dies ist jedoch beabsichtigt. Ich möchte, dass die Anmeldeseite keine Navigationsleiste und Seitenleiste hat

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} />;
};