Bagaimana untuk Membuat Reka Letak Berbeza dalam Penghala Reaksi v6?

Memberikan Komponen dengan Reka Letak/Elemen Berbeza Menggunakan Penghala Reaksi v6

Dalam Penghala Reaksi v6, pemaparan komponen dengan reka letak atau elemen yang berbeza boleh dicapai menggunakan laluan bersarang atau konfigurasi laluan dengan useRoutes cangkuk.

Laluan Bersarang

Untuk memaparkan dan komponen pada semua laluan kecuali laluan log masuk, buat komponen reka letak yang menjadikannya dan saluran keluar untuk laluan bersarang.

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

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

Konfigurasi Laluan dan gunakan Cangkuk Laluan

Sebagai alternatif , gunakan konfigurasi laluan dan cangkuk useRoutes untuk menentukan anda laluan:

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

Konfigurasi Laluan dan Penghala Data (v6.4.0 Sahaja)

Sehingga React Router v6.4.0, anda juga boleh menggunakan penghala data untuk menentukan laluan anda:

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

Atas ialah kandungan terperinci Bagaimana untuk Membuat Reka Letak Berbeza dalam Penghala Reaksi v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!