Memaparkan komponen dengan susun atur/elemen yang berbeza menggunakan react-router-dom v6: Bagaimanakah saya boleh mencapai ini?

Question

Saya menghadapi masalah menulis kod untuk memaparkan halaman log masuk tanpa bar navigasi dan bar sisi. Saya telah menjumpai beberapa halaman yang menanyakan soalan yang sama, tetapi tidak ada yang sesuai dengan situasi semasa saya.

Cara menyembunyikan bar navigasi dalam halaman log masuk penghala bertindak balas Contoh yang diberikan adalah hebat, tetapi saya percaya cara untuk mencapai tugas yang sama telah berubah dengan react-router-dom v6, yang membawa saya ke https://dev.to/iamandrewluca/private-route-in-react- Baca tentang perubahan ini dalam penghala-v6-lg5

Nampaknya saya tidak memahami sesuatu tentang penghalaan React Router. Dalam kod di bawah saya mempunyai dua laluan. Saya ingin memberikan salah satu laluan (log masuk) tanpa bar navigasi dan komponen bar sisi.

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

Pilihan lain yang saya juga cuba ialah mengalihkan label bar navbar dan bar sisi ke dalam komponen papan pemuka, tetapi kemudian saya pada asasnya perlu melakukan salin dan tampal yang sama dengan mana-mana komponen baharu. Pendekatan ini terasa salah dan tidak cekap, tetapi jika pendekatan yang betul, saya akan melakukan apa yang perlu

EDIT: Saya fikir adalah penting untuk memasukkan bahawa perkara yang dilakukan pada masa ini ialah memuatkan halaman log masuk yang mengandungi bar navigasi dan bar sisi. Komponen Navigasi ke Papan Pemuka mempunyai bar navigasi dan bar sisi, tetapi ini disengajakan. Saya mahu halaman log masuk tidak mempunyai bar navigasi dan bar sisi

Answer 1

Cara paling mudah untuk menyembunyikan bar navigasi ialah pergi ke komponen halaman log masuk dan panggil useLocation(). Kemudian, selepas mengisytiharkan lokasi penggunaan, anda akan melakukan sesuatu seperti ini. dan berikannya kepada kedudukan berubah-ubah { location.pathname === "/login" ?Kosong: (

Render keseluruhan komponen bar navigasi);

Tidak jika anda boleh membaca semasa saya menaip pada telefon saya

Answer 2

Jika saya memahami soalan anda, anda mahu navigasi dan bar sisi dipaparkan pada laluan bukan log masuk. Untuk melakukan ini, anda boleh membuat komponen reka letak untuk menjadikannya dan saluran keluar laluan bersarang.

Gunakan penghalaan bersarang

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

Gunakan konfigurasi laluan dan useRoutes cangkuk

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

Gunakan konfigurasi penghalaan dan penghala data (Diperkenalkan dalam 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} />;
};