Menguasai Navigasi dalam React dengan useNavigate Hook

gunakanNavigate Hook dalam React

Kait useNavigate ialah sebahagian daripada Penghala Reaksi (v6 dan ke atas) dan digunakan untuk menavigasi secara pemrograman antara laluan berbeza dalam aplikasi anda. Tidak seperti navigasi tradisional (cth., mengklik pada pautan), cangkuk useNavigate membolehkan anda menavigasi secara dinamik berdasarkan tindakan pengguna, seperti penyerahan borang, klik butang atau perubahan keadaan.

Cakuk ini menggantikan cangkuk useHistory yang lebih lama daripada React Router v5 dan menjadikannya lebih mudah untuk mengendalikan navigasi dalam komponen berfungsi.

---

Cara useNavigate Berfungsi

Kait useNavigate mengembalikan fungsi yang boleh digunakan untuk menavigasi secara atur cara ke laluan tertentu. Anda boleh melepasi laluan atau objek lokasi ke fungsi ini dan ia akan melakukan navigasi dengan sewajarnya.

Sintaks:

const navigate = useNavigate();

Parameter:

• laluan (rentetan): Laluan untuk menavigasi ke (cth., "/home", "/profile/:id").
• pilihan (pilihan, objek):
  • ganti: Boolean yang menentukan sama ada navigasi harus menggantikan entri sejarah semasa (lalai adalah palsu).
  • negeri: Keadaan pilihan yang boleh anda lalui ke laluan baharu. Ini boleh berguna untuk menghantar maklumat ke laluan destinasi.

Penggunaan Biasa:

• Navigasi ke laluan lain.
• Ganti entri sejarah semasa (tiada tindakan belakang).
• Lewati negeri tambahan ke laluan destinasi.

---

Contoh: Navigasi Asas dengan useNavigate

Berikut ialah contoh mudah tentang cara anda boleh menggunakan cangkuk useNavigate untuk menavigasi secara pengaturcaraan apabila pengguna mengklik butang.

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

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

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

Penjelasan:

• Kait useNavigate digunakan untuk mendapatkan fungsi navigasi.
• Apabila butang diklik, fungsi goToProfile dipanggil, yang menggunakan navigasi('/profile') untuk menavigasi secara atur cara ke laluan /profile.

---

Contoh: Navigasi dengan Parameter Dinamik

Anda juga boleh menggunakan useNavigate untuk menavigasi ke laluan dinamik, di mana anda melepasi parameter.

const navigate = useNavigate();

Penjelasan:

• Navigasi(/user/${userId}) secara dinamik menjana URL berdasarkan parameter userId.
• Mengklik butang untuk Pengguna 1 atau Pengguna 2 akan menavigasi ke /user/1 atau /user/2.

---

Contoh: Gantikan Entri Sejarah dengan Pilihan ganti

Apabila menavigasi, anda boleh menggunakan pilihan ganti untuk menggantikan entri semasa dalam timbunan sejarah dan bukannya menolak yang baharu. Ini bermakna apabila pengguna mengklik butang "kembali" penyemak imbas, mereka tidak akan kembali ke laluan sebelumnya.

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

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

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

Penjelasan:

• Navigasi('/terima kasih', { replace: true }) akan menavigasi ke laluan /terima kasih dan menggantikan entri semasa dalam timbunan sejarah, bermakna pengguna tidak boleh kembali ke halaman penyerahan borang menggunakan butang "kembali".

---

Contoh: Melepasi Negeri dengan Navigasi

Anda boleh melepasi keadaan tambahan bersama-sama dengan navigasi, yang kemudiannya boleh diakses pada laluan sasaran menggunakan useLocation.

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

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

  const goToUserProfile = (userId) => {
    // Navigate to the profile of a specific user by ID
    navigate(`/user/${userId}`);
  };

  return (
    <div>
      <h2>User List</h2>
      <button onClick={() => goToUserProfile(1)}>Go to User 1's Profile</button>
      <button onClick={() => goToUserProfile(2)}>Go to User 2's Profile</button>
    </div>
  );
};

export default UserList;

Pada laluan /settings, anda boleh mengakses keadaan yang diluluskan seperti ini:

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

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

  const handleSubmit = () => {
    // Perform form submission logic
    // Then navigate to a "Thank You" page, replacing the current entry in history
    navigate('/thank-you', { replace: true });
  };

  return (
    <div>
      <h2>Submit Form</h2>
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default SubmitForm;

Penjelasan:

• Navigasi('/settings', { state: { userId: 123, userName: 'John Doe' } }) melepasi objek sebagai keadaan.
• Dalam komponen /settings, kami menggunakan useLocation untuk mengakses keadaan yang diluluskan, yang termasuk userId dan UserName.

---

Kes Penggunaan Biasa untuk useNavigate

1. Ubah hala Selepas Penyerahan Borang:
   Selepas menyerahkan borang (cth., pendaftaran pengguna), anda boleh mengubah hala pengguna ke halaman kejayaan atau log masuk.

2. Navigasi Bersyarat:
   Berdasarkan tindakan atau syarat pengguna (seperti pengesahan), anda boleh menavigasi ke laluan berbeza secara dinamik.

3. Penghalaan Programatik:
   Anda boleh menavigasi secara pengaturcaraan berdasarkan logik tersuai, seperti apabila tindakan selesai atau peristiwa dicetuskan.

4. Menavigasi Selepas Panggilan API Berjaya:
   Selepas panggilan API berjaya (cth., log masuk), anda boleh mengubah hala pengguna ke halaman profil atau papan pemuka mereka.

---

Kesimpulan

Kait useNavigate dalam React Router ialah alat yang berkuasa untuk mengendalikan navigasi program dalam komponen berfungsi. Ia membolehkan anda menavigasi ke laluan berbeza secara dinamik berdasarkan tindakan pengguna atau keadaan aplikasi. Dengan pilihan seperti ganti dan keupayaan untuk melepasi keadaan, useNavigate menyediakan fleksibiliti untuk mengawal tingkah laku navigasi dalam aplikasi React.

---

Atas ialah kandungan terperinci Menguasai Navigasi dalam React dengan useNavigate Hook. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!