Bagaimanakah Saya Boleh Memaparkan Komponen React dengan Reka Letak Tersuai Menggunakan React Router v6?

Memaparkan Komponen dengan Reka Letak Tersuai menggunakan Penghala React v6

Dalam React, komponen membolehkan anda menentukan laluan untuk aplikasi anda dan menentukan komponen yang harus diberikan berdasarkan URL semasa. Apabila bekerja dengan jenis halaman yang berbeza, seperti halaman log masuk yang memerlukan reka letak tersuai tanpa elemen navigasi, anda perlu memahami cara mengawal reka letak komponen anda.

Penghala Reaksi v6 memperkenalkan konsep yang dipanggil " laluan bersarang." Ini membolehkan anda membuat komponen reka letak yang akan digunakan sebagai induk laluan lain. Dalam komponen reka letak ini, anda boleh memasukkan elemen kongsi seperti Navbar dan Sidebar.

Untuk melaksanakan ini, anda boleh mencipta komponen AppLayout yang merangkumi Navbar dan Sidebar. Kemudian, dalam komponen Apl anda, bungkus semua laluan kecuali halaman log masuk dalam AppLayout.

// AppLayout.js
import { Outlet } from 'react-router-dom';

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

// App.js
import { Routes, Route } from 'react-router-dom';
import { AppLayout } from './AppLayout';
import LoginPage from './LoginPage';
import Dashboard from './Dashboard';

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

Sebagai alternatif, anda boleh menggunakan cangkuk useRoutes atau komponen dengan penghala data (diperkenalkan dalam v6.4.0) untuk mencapai hasil yang sama. Kaedah khusus yang anda pilih akan bergantung pada keutamaan anda dan keperluan permohonan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Komponen React dengan Reka Letak Tersuai Menggunakan React Router v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!