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