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.