Bagaimana untuk Mengecualikan NavBar dan SideBar daripada Laluan Tertentu dalam React Router v6?

Memberikan Komponen dengan Mempelbagaikan Reka Letak dalam Penghala Reaksi v6

Penghala Reaksi v6 memberi anda kuasa untuk memaparkan komponen dengan reka letak dan elemen yang berbeza. Mari kita tangani cabaran khusus yang anda hadapi: tidak termasuk bar navigasi (NavBar) dan bar sisi (SideBar) daripada laluan tertentu, iaitu halaman log masuk (LoginPage).

Secara lalai, React Router memaparkan laluan dalam susun atur yang sama, termasuk komponen seperti NavBar dan SideBar. Untuk mengatasi gelagat ini, perkenalkan komponen reka letak berasingan yang merangkumi elemen yang diingini dan menyediakan saluran keluar untuk laluan bersarang.

Menggunakan Laluan Bersarang

Buat komponen reka letak, AppLayout, yang merangkumi NavBar dan 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>
  </>
);

Ubah suai komponen Apl anda untuk menggunakan ini susun atur:

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

Pendekatan ini menjadikan Halaman Masuk tanpa NavBar dan SideBar dan menyertakannya untuk laluan Papan Pemuka yang bersarang dalam AppLayout.

Menggunakan Konfigurasi Laluan dan useRoutes Hook

Alternatif kaedah adalah untuk menentukan objek konfigurasi laluan dan menggunakan cangkuk useRoutes. Begini caranya:

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

Pendekatan ini memaparkan laluan secara dinamik berdasarkan konfigurasi laluan.

Menggunakan Konfigurasi Laluan dan Penghala Data (Diperkenalkan dalam v6.4.0)

Dengan React Router v6.4.0, anda boleh menggunakan penghala data untuk mencapai perkara yang sama hasil:

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

Pendekatan ini melibatkan mencipta contoh createBrowserRouter dan menggunakan RouterProvider untuk memberikan laluan.

Atas ialah kandungan terperinci Bagaimana untuk Mengecualikan NavBar dan SideBar daripada Laluan Tertentu dalam React Router v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!