Menguasai Laluan Bersarang dalam Penghala Reaksi: Membina Reka Letak Dinamik

Laluan Bersarang dalam Penghala Reaksi

Laluan Bersarang dalam Penghala Reaksi membolehkan anda menentukan laluan dalam laluan lain, mendayakan reka letak yang kompleks dan keupayaan untuk memaparkan komponen berbeza bergantung pada laluan. Ciri ini amat berguna untuk membina aplikasi dengan bahagian yang mempunyai sub-laluan sendiri, seperti papan pemuka, profil atau panel pentadbir.

Laluan bersarang membantu membuat URL hierarki, di mana setiap laluan boleh mempunyai laluan anak yang memaparkan kandungan tertentu dalam komponen induknya.

---

Cara Membuat Laluan Bersarang

Untuk menyediakan laluan bersarang dalam Penghala Reaksi, anda menentukan laluan dalam laluan induk menggunakan komponen Laluan dan Laluan.

Langkah untuk Melaksanakan Laluan Bersarang

1. Laluan Induk: Tentukan laluan untuk komponen induk.
2. Laluan Kanak-kanak: Di dalam komponen induk, cipta komponen Laluan dengan komponen Laluan tambahan untuk mengendalikan laluan kanak-kanak.
3. Render Child Components: Pastikan komponen induk mengandungi komponen, yang bertindak sebagai pemegang tempat untuk memaparkan komponen anak.

---

Contoh Asas Laluan Bersarang

Berikut ialah contoh asas yang menunjukkan cara menentukan laluan induk dan laluan bersarang:

import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

// Parent Component
const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile">Profile</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

// Child Components
const Profile = () => <h3>Profile Page</h3>;
const Settings = () => <h3>Settings Page</h3>;

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Routes */}
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Penjelasan:

• Komponen Papan Pemuka ialah laluan induk yang memaparkan pautan navigasi dan komponen. berfungsi sebagai pemegang tempat di mana komponen laluan kanak-kanak akan dipaparkan.
• Komponen Profil dan Tetapan ialah laluan bersarang di dalam Papan Pemuka.
• Komponen Pautan digunakan untuk navigasi dan apabila diklik, ia akan mengemas kini URL dan memaparkan komponen bersarang masing-masing (cth., /dashboard/profile atau /dashboard/settings).
• Komponen Laluan dan Laluan di dalam Papan Pemuka mentakrifkan laluan bersarang, memastikan bahawa apabila URL sepadan /papan pemuka/profil atau /papan pemuka/tetapan, komponen yang sesuai dipaparkan.

---

Laluan Bersarang dengan Parameter Laluan

Anda juga boleh membuat laluan bersarang dengan parameter dinamik.

import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

// Parent Component
const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile">Profile</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

// Child Components
const Profile = () => <h3>Profile Page</h3>;
const Settings = () => <h3>Settings Page</h3>;

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Routes */}
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Penjelasan:

• Komponen Profil menerima parameter dinamik daripada URL (/papan pemuka/profil/:id).
• useParams() hook digunakan untuk mengakses parameter dinamik, dalam kes ini, id.
• Laluan induk /papan pemuka mempunyai laluan anak untuk setiap profil, dan apabila URL berubah (contohnya, /papan pemuka/profil/1), komponen Profil akan memaparkan ID pengguna.

---

Mengendalikan Laluan Bersarang Lalai

Penghala React menyediakan cara untuk mengendalikan laluan bersarang lalai. Jika tiada laluan kanak-kanak tertentu dipadankan, anda boleh memaparkan komponen lalai.

import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile/1">Profile 1</Link></li>
          <li><Link to="profile/2">Profile 2</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

const Profile = () => {
  const { id } = useParams();  // Retrieve the 'id' parameter from the URL
  return <h3>Profile Page for User: {id}</h3>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Route with Path Parameter */}
          <Route path="profile/:id" element={<Profile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Penjelasan:

• Laluan indeks ialah laluan khas yang digunakan untuk menentukan komponen lalai apabila laluan induk dipadankan tetapi tiada laluan anak disediakan.
• Dalam kes ini, /dashboard akan memaparkan komponen DashboardHome secara lalai, tetapi jika /dashboard/profile atau /dashboard/settings diakses, komponen masing-masing akan ditunjukkan.

---

Kesimpulan

Laluan bersarang dalam React Router ialah ciri penting untuk membina UI kompleks dengan struktur hierarki. Mereka membenarkan anda memecahkan aplikasi anda kepada komponen yang lebih kecil dan boleh diurus sambil mengekalkan navigasi bersih dan dinamik. Dengan menggunakan komponen, anda boleh memaparkan laluan anak dalam komponen induk dan anda boleh memperibadikan selanjutnya dengan parameter dinamik, laluan lalai dan struktur URL bersarang.

---

Atas ialah kandungan terperinci Menguasai Laluan Bersarang dalam Penghala Reaksi: Membina Reka Letak Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!