Memahami Asas Penghala React: Mengurus Navigasi dalam React

Asas Penghala Bertindak Balas

Penghala React ialah perpustakaan berkuasa yang digunakan untuk penghalaan dalam aplikasi React. Ia membenarkan pembangun untuk menentukan laluan dalam aplikasi mereka dan mengurus navigasi antara paparan atau komponen yang berbeza. React Router memudahkan untuk membuat aplikasi satu halaman (SPA) dengan mengendalikan penghalaan dinamik dan navigasi berasaskan URL.

---

Konsep Utama Penghala Reaksi

1. Penghalaan: Ia merujuk kepada proses menavigasi dari satu URL ke URL lain dalam aplikasi anda.
2. SPA (Aplikasi Halaman Tunggal): Penghala Reaksi direka bentuk untuk SPA, di mana aplikasi dimuatkan sekali dan hanya bahagian halaman dikemas kini apabila pengguna menavigasi ke laluan yang berbeza.

---

Komponen Teras Penghala Reaksi

1. Penghala Penyemak Imbas (atau HashRouter):
   • Komponen ini ialah pembalut yang memegang logik penghalaan anda dan digunakan untuk mendayakan navigasi.
   • BrowserRouter menggunakan API sejarah HTML5 untuk memanipulasi URL penyemak imbas dan memastikan UI segerak.
   • Untuk pelayar lama atau dalam kes di mana API sejarah HTML5 tidak disokong, HashRouter boleh digunakan (walaupun ia menggunakan penghalaan berasaskan cincang).

Contoh:

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

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

1. Laluan:
   • komponen digunakan untuk menentukan semua laluan dalam aplikasi anda. Ia bertindak sebagai bekas untuk elemen Laluan individu.
   • Dalam React Router v6, Routes menggantikan komponen Suis sebelumnya.

Contoh:

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

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

1. Laluan:
   • komponen mentakrifkan pemetaan antara laluan URL dan komponen.
   • Prop laluan mentakrifkan URL dan prop elemen menentukan komponen yang sepatutnya dipaparkan apabila laluan dipadankan.

Contoh:

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

1. Pautan:
   • komponen digunakan untuk menavigasi antara laluan yang berbeza tanpa memuatkan semula halaman. Ia memaparkan teg sauh () yang bertindak balas terhadap peristiwa klik dan mengemas kini URL penyemak imbas dengan sewajarnya.

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!