Memahami Laluan Bersarang dalam React: Panduan Komprehensif

Dalam React, laluan bersarang membolehkan anda menstruktur laluan anda secara hierarki, di mana satu laluan bersarang di dalam laluan yang lain. Ini berguna apabila membina UI kompleks yang mana komponen atau halaman tertentu dikongsi merentas laluan yang berbeza.

Untuk membuat laluan bersarang, anda boleh menggunakan React Router, perpustakaan popular untuk mengendalikan penghalaan dalam aplikasi React.

Contoh menggunakan React Router (v6):

1. Pasang Penghala Reaksi:

   npm install react-router-dom

1. Sediakan laluan bersarang:

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

   // Layout Component with Nested Routes
   function Layout() {
     return (
       <div>
         <nav>
           <ul>
             <li>
               <Link to="/">Home</Link>
             </li>
             <li>
               <Link to="/about">About</Link>
             </li>
             <li>
               <Link to="/dashboard">Dashboard</Link>
             </li>
           </ul>
         </nav>

         {/* This is where nested routes will be rendered */}
         <Outlet />
       </div>
     );
   }

   // Components for each route
   function Home() {
     return <h2>Home Page</h2>;
   }

   function About() {
     return <h2>About Page</h2>;
   }

   function Dashboard() {
     return (
       <div>
         <h2>Dashboard</h2>
         <nav>
           <ul>
             <li>
               <Link to="stats">Stats</Link>
             </li>
             <li>
               <Link to="settings">Settings</Link>
             </li>
           </ul>
         </nav>

         {/* Nested routes inside Dashboard */}
         <Outlet />
       </div>
     );
   }

   function Stats() {
     return <h2>Dashboard Stats</h2>;
   }

   function Settings() {
     return <h2>Dashboard Settings</h2>;
   }

   // App Component with Routes
   function App() {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route index element={<Home />} />
             <Route path="about" element={<About />} />
             <Route path="dashboard" element={<Dashboard />}>
               <Route path="stats" element={<Stats />} />
               <Route path="settings" element={<Settings />} />
             </Route>
           </Route>
         </Routes>
       </Router>
     );
   }

   export default App;

Perkara Utama:

• Alur keluar: Di sinilah komponen laluan bersarang dipaparkan.
• Route path="/" element={}: Laluan utama dengan kanak-kanak bersarang.
• Laluan Bersarang: Elemen }> mengandungi laluan bersarang lagi untuk "statistik" dan "tetapan."

Struktur ini membolehkan anda mempunyai reka letak biasa (seperti menu papan pemuka) dan memuatkan bahagian tertentu secara dinamik seperti statistik atau tetapan berdasarkan laluan bersarang.

Atas ialah kandungan terperinci Memahami Laluan Bersarang dalam React: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!