React Router v6 の特定のルートから NavBar と SideBar を除外する方法は?

React Router v6 でのさまざまなレイアウトでのコンポーネントのレンダリング

React Router v6 では、さまざまなレイアウトや要素でコンポーネントをレンダリングできます。直面している特定の課題に取り組んでみましょう。特定のルート、つまりログイン ページ (LoginPage) からナビゲーション バー (NavBar) とサイドバー (SideBar) を除外します。

デフォルトでは、React Router は、 NavBar や SideBar などのコンポーネントを含む同じレイアウト。この動作をオーバーライドするには、必要な要素を包含し、ネストされたルートのアウトレットを提供する別のレイアウト コンポーネントを導入します。

ネストされたルートの使用

NavBar と SideBar をカプセル化するレイアウト コンポーネント AppLayout を作成します。 .

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

このアプローチは、NavBar と SideBar なしで LoginPage をレンダリングし、AppLayout 内にネストされたダッシュボード ルートにそれらを含めます。

Routes 構成と useRoutes フックを使用する

代替案方法は、ルート設定オブジェクトを定義し、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 では、データ ルーターを使用して同じことを実現できますresult:

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 中国語 Web サイトの他の関連記事を参照してください。