如何在 React Router v6 中從特定路由中排除 NavBar 和 SideBar？

在 React Router v6 中渲染具有不同佈局的元件

React Router v6 可讓您渲染具有不同佈局和元素的元件。讓我們解決您面臨的特定挑戰：從特定路由（即登入頁面（LoginPage））中排除導覽列（NavBar）和側邊欄（SideBar）。

預設情況下，React Router 在相同的佈局，包括 NavBar 和 SideBar 等元件。若要覆寫此行為，請引入一個單獨的佈局元件，該元件包含所需的元素並為嵌套路由提供出口。

使用巢狀路由

建立一個佈局元件AppLayout，它封裝了NavBar 和SideBar .

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

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

修改您的應用程式元件以使用此元件：

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route element={<AppLayout />}>
          <Route path="/" element={<Dashboard />} /> {/* Nested route */}
        </Route>
      </Routes>
    </>
  );
};

此方法渲染不含導覽列和側邊欄的LoginPage，並將它們包含在AppLayout 中嵌套的 Dashboard 路由。

使用路由配置和 useRoutes Hook

另一種選擇方法是定義一個路由配置物件並利用 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 中引入）

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

此方法涉及建立createBrowserRouter 實例並使用RouterProvider 渲染路由。

以上是如何在 React Router v6 中從特定路由中排除 NavBar 和 SideBar？的詳細內容。更多資訊請關注PHP中文網其他相關文章！