Penghala Reaksi: Konsep dan Panduan Praktikal (Bahagian 1)

Panduan Muktamad untuk Penghala Reaksi: Konsep dan Panduan Praktikal

Pengenalan

Penghalaan ialah ciri penting dalam mana-mana aplikasi web moden. Ia membolehkan pengguna menavigasi antara bahagian atau halaman yang berbeza dengan lancar, mewujudkan pengalaman yang lancar dan interaktif. Dalam React, ini dicapai menggunakan React Router, perpustakaan berkuasa yang direka untuk mengendalikan penghalaan dalam Aplikasi Halaman Tunggal (SPA).

React Router memudahkan proses mencipta laluan dinamik dan bersarang, mengendalikan parameter URL, melaksanakan laluan yang dilindungi dan banyak lagi. Dalam panduan komprehensif ini, kami akan meneroka semua aspek Penghala React, memecahkan konsepnya langkah demi langkah dan melaksanakannya dengan contoh praktikal.

---

Apakah Penghala Reaksi?

Penghala React ialah perpustakaan berasaskan komponen deklaratif untuk mengurus penghalaan dalam aplikasi React. Ia menggunakan pendekatan moden untuk memetakan URL kepada komponen, membolehkan pembangun membina SPA berskala dan dinamik dengan mudah.

Ciri Utama Penghala Reaksi

1. Penghalaan Pengisytiharan: Tentukan laluan sebagai komponen, yang menjadikan sistem penghalaan mudah difahami dan diselenggara.
2. Penghalaan Dinamik: Kendalikan parameter dinamik dalam URL seperti /user/:id untuk mencipta laluan yang fleksibel dan boleh digunakan semula.
3. Laluan Bersarang: Susun laluan anda secara hierarki, membolehkan perhubungan ibu bapa-anak.
4. Laluan Dilindungi: Lindungi laluan khusus di sebalik pengesahan atau kebenaran.
5. Navigasi Programatik: Navigasi antara halaman secara pengaturcaraan berdasarkan tindakan pengguna.
6. Sokongan untuk Sejarah Penyemak Imbas: Segerakkan dengan navigasi penyemak imbas, termasuk tindakan ke hadapan, ke belakang dan muat semula.

---

Memasang Penghala Reaksi

Sebelum bermula, mari sediakan React Router dalam projek anda. Pasang pustaka menggunakan npm atau yarn:

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

Setelah dipasang, anda sudah bersedia untuk menyepadukan React Router ke dalam aplikasi anda.

---

Konsep Teras Penghala Reaksi

React Router berkisar pada beberapa konsep teras yang membentuk asas sistem penghalaannya. Mari kita pecahkan langkah demi langkah.

---

1. Komponen Penghala Pelayar dan Penghala

Di peringkat atas aplikasi React anda, anda perlu membungkus semuanya di dalam Penghala. React Router menyediakan berbilang jenis penghala, tetapi yang paling biasa ialah BrowserRouter, yang menggunakan API sejarah penyemak imbas untuk mengurus navigasi.

Perkara Penting tentang BrowserRouter

• Ia menyediakan konteks yang diperlukan untuk penghalaan.
• Ia mendengar perubahan dalam URL penyemak imbas dan memaparkan semula komponen dengan sewajarnya.
• Jenis penghala lain, seperti HashRouter, gunakan cincang (#) dalam URL untuk navigasi, tetapi BrowserRouter lebih biasa digunakan dalam aplikasi moden.

Cara Menggunakan BrowserRouter

Berikut ialah contoh asas penggunaan BrowserRouter:

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

Penjelasan:

• Kami mengimport BrowserRouter daripada react-router-dom.
• Komponen BrowserRouter membungkus keseluruhan aplikasi untuk mendayakan fungsi penghalaan.

Nota: Anda hanya boleh mempunyai satu BrowserRouter pada akar aplikasi anda.

---

2. Laluan dan Komponen Laluan

Selepas membungkus apl anda dengan BrowserRouter, anda menentukan laluan individu menggunakan komponen Laluan dan Laluan.

Apakah Laluan dan Komponen Laluan?

• Laluan: Bekas untuk semua laluan dalam aplikasi anda.
• Laluan: Mewakili satu laluan dan mentakrifkan:
  • laluan: Laluan URL untuk dipadankan.
  • elemen: Komponen React untuk dipaparkan jika laluan sepadan.

Contoh Asas

import React from "react";
import { BrowserRouter } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div>
                <h1>Welcome to My App</h1>
                <p>Routing starts here!</p>
            </div>
        </BrowserRouter>
    );
}

export default App;

Penjelasan:

1. path="/": Laluan ini sepadan dengan URL akar (/) dan memaparkan komponen Laman Utama.
2. path="/about": Memadankan /about dan memaparkan komponen Perihal.
3. Apabila URL berubah (cth., /about), React Router secara automatik memaparkan komponen yang sepadan.

---

3. Komponen Pautan dan NavLink

Dalam aplikasi React, menggunakan tag untuk navigasi menyebabkan penyemak imbas memuatkan semula halaman. React Router menyediakan komponen Pautan dan NavLink untuk navigasi yang lancar tanpa muat semula halaman.

Komponen Pautan

Komponen Pautan membolehkan anda menavigasi antara laluan dengan mengemas kini URL tanpa memuatkan semula halaman.

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function Home() {
    return <h1>Home Page</h1>;
}

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

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

export default App;

Penjelasan:

• Pautan menggantikan tradisional tanda nama.
• Gunakan topang untuk menentukan laluan destinasi.

Komponen NavLink

Komponen NavLink adalah serupa dengan Pautan, tetapi ia membolehkan anda menggayakan pautan berdasarkan sama ada ia aktif.

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
    return <h1>Home Page</h1>;
}

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

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

function App() {
    return (
        <BrowserRouter>
            <Navbar />
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Perbezaan Utama:

• Komponen NavLink menambahkan prop activeClassName (atau isActive) untuk menggayakan pautan aktif.

---

Menyatukan Semuanya

Mari gabungkan konsep ini ke dalam contoh aplikasi kecil:

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

Output:

• Navigasi ke / untuk melihat Halaman Utama.
• Navigasi ke /about untuk melihat Halaman Perihal.
• Halaman dikemas kini secara dinamik tanpa memuat semula.

---

Langkah Seterusnya

Dalam bahagian ini, kami membincangkan asas:

1. Apa itu React Router dan cara ia berfungsi.
2. Menyediakan BrowserRouter.
3. Menentukan laluan menggunakan Laluan dan Laluan.
4. Menambahkan navigasi dengan Pautan dan NavLink.

Dalam artikel seterusnya, kami akan meneroka:

• Penghalaan bersarang
• Laluan dinamik
• Mengendalikan parameter URL

Nantikan ansuran seterusnya siri Panduan Muktamad untuk React Router ini!

Atas ialah kandungan terperinci Penghala Reaksi: Konsep dan Panduan Praktikal (Bahagian 1). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!