Menguasai Penghalaan Reaksi: Panduan Lengkap untuk Menavigasi Aplikasi Anda

1. Pengenalan Penghala Reaksi

React Router ialah perpustakaan untuk mengendalikan penghalaan dalam aplikasi React. Ia membolehkan apl anda menavigasi antara komponen dan paparan yang berbeza tanpa muat semula halaman penuh, menjadikan pengalaman pengguna lancar.

---

2. Persediaan Asas

Mulakan dengan memasang react-router-dom:

npm install react-router-dom

Sediakan penghalaan asas menggunakan BrowserRouter, Laluan dan Laluan:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

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

export default App;

---

3. Penghalaan Bersarang

Untuk apl yang lebih kompleks, anda boleh membuat sarang laluan. Begini cara untuk menyediakan laluan bersarang dalam komponen induk:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Dashboard = () => <h2>Dashboard Home</h2>;
const Profile = () => <h2>Your Profile</h2>;

const DashboardLayout = () => {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Home</Link>
        <Link to="/dashboard/profile">Profile</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="profile" element={<Profile />} />
      </Routes>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard/*" element={<DashboardLayout />} />
      </Routes>
    </Router>
  );
};

export default App;

---

4. Penghalaan Dinamik

Penghalaan dinamik membolehkan anda menghantar parameter dalam URL. Begini cara untuk mentakrif dan mengakses laluan dinamik:

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

const User = () => {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/user/1">User 1</Link>
        <Link to="/user/2">User 2</Link>
      </nav>

      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </Router>
  );
};

export default App;

---

5. Laluan Dilindungi

Untuk melaksanakan laluan yang dilindungi, anda boleh mencipta komponen PrivateRoute tersuai:

import { Navigate, Outlet } from 'react-router-dom';

const useAuth = () => {
  const user = { loggedIn: true }; // Replace with actual auth logic
  return user && user.loggedIn;
};

const PrivateRoute = () => {
  const isAuth = useAuth();
  return isAuth ? <Outlet /> : <Navigate to="/login" />;
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<PrivateRoute />}>
          <Route path="" element={<Dashboard />} />
        </Route>
      </Routes>
    </Router>
  );
};

export default App;

---

6. Navigasi Programatik

Kadangkala, anda mungkin mahu menavigasi secara pemrograman, seperti selepas penyerahan borang. Gunakan cangkuk useNavigate dalam React Router v6:

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

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

  const handleLogin = () => {
    // Login logic here...
    navigate('/dashboard');
  };

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

export default Login;

---

7. 404 Halaman

Kendalikan ralat 404 (Tidak Ditemui) dengan mencipta laluan tangkap semua:

const NotFound = () => <h2>404 - Page Not Found</h2>;

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

export default App;

---

8. Pertimbangan Prestasi

Untuk aplikasi yang besar, laluan pemuatan malas boleh meningkatkan prestasi. Begini cara untuk melaksanakan pemuatan malas dengan React.lazy() dan Suspense:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
};

export default App;

---

Atas ialah kandungan terperinci Menguasai Penghalaan Reaksi: Panduan Lengkap untuk Menavigasi Aplikasi Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!