Memahami Asas Penghala React: Mengurus Navigasi dalam React

Contoh:

   import { Link } from 'react-router-dom';

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

1. useNavigate:
   • Kait useNavigate digunakan untuk menavigasi secara atur cara ke laluan yang berbeza.
   • Kail ini biasanya digunakan di dalam pengendali acara atau kesan sampingan.

Contoh:

   import { BrowserRouter } from 'react-router-dom';

   const App = () => {
     return (
       <BrowserRouter>
         <Routes />
       </BrowserRouter>
     );
   };

Contoh Penghalaan Asas

Berikut ialah contoh asas yang menunjukkan Penghala Reaksi dalam apl React berfungsi:

   import { Routes, Route } from 'react-router-dom';

   const Routes = () => {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     );
   };

Penjelasan:

• Komponen BrowserRouter membungkus keseluruhan apl untuk mendayakan penghalaan.
• Komponen Pautan digunakan untuk membuat pautan navigasi yang tidak mencetuskan muat semula halaman.
• Komponen Laluan mengandungi semua laluan dan setiap elemen Laluan memetakan laluan URL ke komponen (cth., Laman Utama, Perihal atau Kenalan).
• Mengklik Pautan akan mengemas kini URL dan memaparkan komponen yang sepadan.

Penghalaan Bersarang

Penghala React juga menyokong laluan bersarang, membolehkan anda menentukan laluan dalam laluan lain.

   <Route path="/" element={<Home />} />

Penjelasan:

• Laluan /papan pemuka mempunyai laluan bersarang: /papan pemuka/profil dan /papan pemuka/tetapan.
• Dengan menggunakan * kad bebas dalam laluan induk (path="dashboard/*"), React Router tahu untuk memberikan laluan anak dalam komponen Dashboard.

Mengubah hala dengan Navigasi

Anda boleh menavigasi pengguna secara pemrograman ke laluan berbeza menggunakan komponen Navigate atau cangkuk useNavigate.

   import { Link } from 'react-router-dom';

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

Penjelasan:

• Komponen Navigate akan mengubah hala pengguna secara automatik ke laluan /about apabila diberikan.

Parameter Laluan

Anda boleh menentukan laluan dinamik dengan memasukkan parameter laluan, yang boleh digunakan untuk menghantar nilai dalam URL.

   import { useNavigate } from 'react-router-dom';

   const Login = () => {
     const navigate = useNavigate();

     const handleLogin = () => {
       // Perform login logic
       navigate('/dashboard');
     };

     return (
       <button onClick={handleLogin}>Login</button>
     );
   };

Penjelasan:

• Id pengguna dalam laluan laluan ialah parameter laluan.
• Kait useParams digunakan dalam komponen UserProfile untuk mengekstrak nilai userId daripada URL dan memaparkannya pada halaman.

Kesimpulan

Penghala React menjadikan navigasi antara paparan dalam aplikasi React mudah dan cekap. Dengan komponennya seperti BrowserRouter, Route, Link dan cangkuk seperti useNavigate, anda boleh mencipta aplikasi satu halaman dinamik dengan logik penghalaan yang kompleks. Dengan memahami asas Penghala React, termasuk pengendalian laluan, laluan bersarang dan parameter laluan, anda boleh mengurus navigasi dengan mudah dalam apl React anda.

Atas ialah kandungan terperinci Memahami Asas Penghala React: Mengurus Navigasi dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!