Mengendalikan Lencongan dalam vKaedah Penghala React dan Amalan Terbaik

Ubah hala dalam Penghala Reaksi v6

Dalam React Router v6, pendekatan untuk mengendalikan ubah hala telah berubah dengan ketara berbanding versi terdahulu. Manakala React Router v5 menggunakan komponen untuk ubah hala, React Router v6 memperkenalkan cangkuk useNavigate dan komponen Navigate untuk mengendalikan ubah hala terprogram dan deklaratif.

Di bawah ialah panduan untuk melaksanakan ubah hala dalam React Router v6.

---

1. Menggunakan Komponen Navigasi (Ubah Hala Deklaratif)

Komponen Navigate digunakan untuk ubah hala deklaratif. Ia biasanya digunakan dalam komponen laluan anda atau mana-mana tempat lain yang anda mahu ubah hala berdasarkan syarat tertentu.

Contoh Asas:

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

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

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

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

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/old-page" element={<Navigate to="/about" />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};

export default App;

Penjelasan:

• Komponen Navigate melakukan ubah hala. Dalam contoh ini, apabila pengguna menavigasi ke /old-page, mereka akan diubah hala secara automatik ke /about.
• To prop Navigate menentukan laluan ke mana pengguna harus diubah hala.

Props Utama Navigasi:

• kepada: URL destinasi atau laluan yang anda mahu ubah hala pengguna.
• ganti: Jika benar, entri semasa dalam timbunan sejarah penyemak imbas diganti, bermakna pengguna tidak boleh kembali ke laluan sebelumnya. Lalai adalah palsu.

<Navigate to="/new-page" replace={true} />

---

2. Menggunakan useNavigate Hook (Programmatic Redirect)

Kait useNavigate digunakan untuk menavigasi atau mengubah hala secara atur cara dalam komponen React anda. Ia amat berguna apabila anda perlu melakukan ubah hala selepas beberapa tindakan (cth., selepas menyerahkan borang, menyelesaikan tugas atau menyemak beberapa syarat).

Contoh: Ubah hala Selepas Penyerahan Borang

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const navigate = useNavigate(); // Hook to handle navigation

  const handleSubmit = (event) => {
    event.preventDefault();

    // Perform authentication logic here...

    // Redirect to the dashboard after successful login
    navigate('/dashboard');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Enter Username"
      />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

Penjelasan:

• Kail useNavigate mengembalikan fungsi (menavigasi) yang boleh anda gunakan untuk menavigasi ke laluan yang berbeza.
• Dalam contoh di atas, selepas borang diserahkan dan log masuk berjaya, pengguna dialihkan ke laluan /papan pemuka.
• Anda juga boleh menggunakan navigasi dengan pilihan tambahan, seperti menggantikan entri sejarah:

navigate('/dashboard', { replace: true });

---

3. Ubah hala Bersyarat

Kadangkala anda mungkin mahu mengubah hala pengguna secara bersyarat berdasarkan kriteria tertentu, seperti sama ada mereka disahkan atau berdasarkan beberapa logik lain.

Contoh: Ubah hala Berdasarkan Pengesahan

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

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

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

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

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/old-page" element={<Navigate to="/about" />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};

export default App;

Penjelasan:

• Dalam contoh ini, komponen ProtectedPage menyemak sama ada pengguna disahkan dengan melihat authToken dalam localStorage.
• Jika pengguna tidak disahkan, komponen menggunakan komponen Navigate untuk mengubah hala mereka ke halaman log masuk.
• Jika pengguna disahkan, ia memaparkan kandungan yang dilindungi.

---

4. Ubah hala pada Perubahan Laluan (Laluan Wildcard)

Kadangkala anda mungkin mahu mengubah hala pengguna apabila mereka mencapai laluan yang tidak sah atau tidak ditentukan (404 halaman). Dalam React Router v6, anda boleh mengendalikannya menggunakan laluan kad bebas *.

Contoh: 404 Ubah Hala Halaman

<Navigate to="/new-page" replace={true} />

Penjelasan:

• Laluan kad bebas * digunakan untuk menangkap semua laluan yang tidak dapat ditandingi. Apabila pengguna menavigasi ke URL yang tidak sah, mereka diubah hala ke /404.
• Laluan /404 kemudiannya dipaparkan dengan mesej "Halaman Tidak Ditemui".

---

Kesimpulan

React Router v6 menyediakan alatan yang berkuasa dan fleksibel untuk mengubah hala pengguna dalam aplikasi React anda. Sama ada anda mahu mengendalikan ubah hala secara deklaratif menggunakan komponen Navigate atau secara pengaturcaraan menggunakan cangkuk useNavigate, React Router menawarkan penyelesaian mudah yang disepadukan dengan lancar dengan logik penghalaan aplikasi anda.

---

Atas ialah kandungan terperinci Mengendalikan Lencongan dalam vKaedah Penghala React dan Amalan Terbaik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!