Memahami vCiri Penghala Reaksi, Persediaan dan Amalan Terbaik

Penghala React v6: Panduan Lengkap

React Router ialah perpustakaan paling popular yang digunakan untuk penghalaan dalam aplikasi React. Ia membolehkan anda menavigasi antara komponen berbeza berdasarkan URL, menyediakan pengalaman aplikasi satu halaman (SPA) di mana kandungan mengemas kini tanpa memuatkan semula keseluruhan halaman. React Router v6 ialah keluaran utama terkini dan memperkenalkan pelbagai penambahbaikan, pemudahan dan ciri baharu berbanding versi sebelumnya.

---

Ciri Utama dan Perubahan dalam Penghala Reaksi v6

1. API Dipermudahkan

   • React Router v6 memperkenalkan API yang lebih mudah dan lebih intuitif untuk menentukan laluan dan navigasi, menghapuskan keperluan untuk banyak penyelesaian yang terdapat dalam v5.

2. Elemen Laluan (elemen)

   • Dalam v6, laluan kini menggunakan prop elemen dan bukannya prop komponen atau render. Ini membolehkan anda menghantar terus komponen untuk dipaparkan.
   • Lama (v5): component={ComponentName}
   • Baharu (v6): element={}

3. Padanan Laluan

   • Padanan laluan kini lebih intuitif. Dalam v6, laluan dipadankan dengan tepat, bermakna padanan terbaik dipilih dan ia tidak lagi memerlukan laluan "tangkap semua" untuk mengendalikan segmen dinamik.
   • komponen digantikan dengan , dan ia digunakan untuk memaparkan hanya laluan pertama yang sepadan dengan URL.

4. Laluan Bersarang

   • React Router v6 menjadikannya lebih mudah untuk menentukan laluan bersarang. Daripada menggunakan render atau anak untuk bersarang, anda kini boleh menentukan terus laluan bersarang menggunakan prop elemen.

5. Tiada Lagi tepat

   • Dalam React Router v6, semua laluan sepadan secara lalai, jadi tidak perlu menggunakan prop tepat untuk menentukan padanan tepat.

6. Cangkuk Penghala Bertindak Balas

   • React Router v6 telah mengemas kini cangkuk agar sepadan dengan seni bina baharunya, termasuk useNavigate, useParams, useLocation, useMatch dan useNavigate.

---

Cara Menyediakan Penghala Reaksi v6

Untuk bermula dengan React Router v6, ikut langkah ini:

1. Pasang React Router v6

Anda boleh memasang React Router v6 menggunakan npm atau benang.

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

2. Tentukan Laluan dan Komponen

Mari lihat contoh cara menyediakan penghalaan asas dalam Penghala Reaksi v6.

Langkah 1: Tentukan Komponen Apl Utama

npm install react-router-dom@6
# or
yarn add react-router-dom@6

• : Ini menggantikan komponen daripada versi sebelumnya. Ia memastikan bahawa hanya laluan padanan pertama dipaparkan.
• } />: Ini mentakrifkan laluan untuk halaman utama dan menjadikan komponen Home.
• : Kad bebas * digunakan untuk mengendalikan 404 ralat atau laluan tidak sepadan, menjadikan komponen NotFound apabila URL tidak sepadan dengan mana-mana laluan.

Langkah 2: Cipta Komponen Individu

Home.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

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

export default App;




<p><strong>Mengenai.js</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

---

Penghalaan Dinamik dengan Penghala React v6

Untuk mengendalikan laluan dinamik, seperti halaman profil pengguna yang ID pengguna adalah sebahagian daripada URL, React Router v6 menyediakan cangkuk useParams.

Langkah 1: Tentukan Laluan Dinamik

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

Penjelasan:

• :userId ialah segmen dinamik dalam laluan laluan. Cangkuk useParams membolehkan anda mengakses nilai userId dalam komponen UserProfile.
• Apabila anda menavigasi ke /user/123, komponen UserProfile akan memaparkan dan memaparkan userId sebagai 123.

---

Laluan Bersarang dalam Penghala Reaksi v6

Laluan bersarang membolehkan anda membina reka letak yang kompleks dengan mentakrifkan sub-laluan dalam laluan induk.

Langkah 1: Tentukan Laluan Ibu Bapa dan Anak

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

const UserProfile = () => {
  const { userId } = useParams();  // Extract the userId from the URL

  return <h2>User Profile for ID: {userId}</h2>;
};

const App = () => {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
};

export default App;

Penjelasan:

• Komponen Papan Pemuka mengandungi laluan bersarang untuk gambaran keseluruhan dan tetapan.
• /* dalam laluan induk memastikan semua laluan kanak-kanak dikendalikan di bawah /papan pemuka.

---

Cangkuk Penghala Bertindakbalas v6

React Router v6 memperkenalkan beberapa cangkuk untuk menavigasi dan mengakses maklumat penghalaan:

1. useNavigate: Navigasi secara atur cara ke laluan berbeza.
2. useParams: Akses parameter URL dinamik.
3. useLocation: Dapatkan maklumat tentang lokasi semasa (URL).
4. useMatch: Memadankan URL semasa dengan laluan yang diberikan.
5. useResolvedPath: Selesaikan laluan ke URL mutlak.

Contoh: useNavigate Hook

Kait useNavigate membenarkan navigasi terprogram dalam aplikasi anda.

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

Amalan Terbaik Penghala React v6

• Padanan Tepat mengikut Lalai: Penghala Reaksi v6 sepadan dengan laluan secara lalai, menjadikannya lebih mudah untuk mengendalikan padanan laluan tanpa perlu menyatakan tepat.
• Gunakan elemen Prop: Hantar JSX terus ke prop elemen dan bukannya menggunakan prop komponen, memudahkan kod anda dan mengurangkan keperluan untuk fungsi render.
• Penghalaan Bersarang: Gunakan laluan bersarang untuk membina reka letak halaman yang kompleks dengan laluan anak, memastikan kod anda modular dan boleh diselenggara.
• Kendalikan 404s dengan Laluan Wildcard: Gunakan kad bebas * untuk menangkap semua laluan yang tidak dapat dipadankan dan memaparkan halaman 404 atau mengubah hala pengguna ke laluan lalai.

---

Kesimpulan

React Router v6 memperkenalkan beberapa penambahbaikan berbanding versi sebelumnya, termasuk API yang lebih ringkas, padanan laluan yang lebih baik dan sokongan yang dipertingkatkan untuk laluan dinamik dan bersarang. Dengan memanfaatkan cangkuk seperti useNavigate, useParams dan useLocation, anda boleh membina sistem penghalaan yang berkuasa dan fleksibel dalam aplikasi React anda.

---

Atas ialah kandungan terperinci Memahami vCiri Penghala Reaksi, Persediaan dan Amalan Terbaik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!