Selesai: ubah hala dengan penghala tindak balas v6

Masalah utama yang berkaitan dengan ubah hala dengan React Router v6 ialah komponen itu tidak membuat semula apabila ubah hala berlaku. Ini bermakna mana-mana keadaan atau prop yang dikaitkan dengan komponen tidak akan dikemas kini apabila ubah hala berlaku dan sebarang perubahan yang dibuat pada nilai tersebut tidak akan ditunjukkan dalam halaman baharu. Selain itu, oleh kerana React Router v6 tidak menyokong rentetan pertanyaan, sebarang parameter pertanyaan yang dihantar dalam URL juga akan hilang semasa ubah hala.

import { Redirect } from "react-router-dom";

<Redirect to="/home" />

1. Baris ini mengimport komponen Ubah hala daripada perpustakaan react-router-dom.

2. Baris ini menghasilkan komponen Ubah hala, yang akan mengubah hala pengguna ke laluan "/home".

Bagaimanakah saya boleh mengubah hala dalam React Router v6

v6

React Router v6 menyediakan komponen baharu yang dipanggil yang boleh digunakan untuk mengubah hala pengguna dari satu halaman ke halaman yang lain. Untuk menggunakannya, anda hanya perlu mengimport komponen Redirect daripada pakej react-router-dom dan kemudian gunakannya dalam konfigurasi laluan anda. Apabila pengguna melawat laluan yang ditentukan dalam prop 'dari', mereka akan diubah hala ke laluan yang ditentukan dalam prop 'ke'. Sebagai contoh:

import { Redirect } daripada 'react-router-dom';
} />

Bagaimanakah cara saya mengubah hala dalam penghala reaksi v6 selepas log masuk

Mengubah hala selepas log masuk berjaya adalah ciri biasa dalam aplikasi web. Dalam React Router v6, anda boleh menggunakan komponen untuk mengubah hala pengguna selepas log masuk berjaya.

Untuk melakukan ini, anda perlu membuat laluan yang menyemak sama ada pengguna telah log masuk dan kemudian mengubah hala mereka dengan sewajarnya. Sebagai contoh:

{
if (isLoggedIn) {
pulangan ;
} Lain {
pulangan ;
}
}} />

Dalam contoh ini, kami menyemak sama ada pengguna telah log masuk dan kemudian sama ada memaparkan komponen Halaman Masuk atau mengubah hala mereka ke /papan pemuka. Anda juga boleh menghantar prop ke dalam komponen Redirect seperti: Ini membolehkan anda menjejaki di mana pengguna berada sebelum mereka diubah hala.

Bagaimanakah cara saya mengubah hala secara automatik dalam tindak balas

React Router menyediakan komponen Ubah hala yang boleh digunakan untuk mengubah hala pengguna secara automatik apabila syarat tertentu dipenuhi. Untuk menggunakannya, anda mesti melalui laluan yang anda ingin ubah hala sebagai prop. Anda juga boleh memasukkan objek dengan keadaan dan/atau parameter pertanyaan jika perlu.

Untuk mengubah hala secara automatik, anda perlu menggunakan komponen dalam komponen Laluan dan menyediakan syarat apabila ubah hala harus berlaku. Sebagai contoh, jika anda ingin mengubah hala pengguna dari halaman utama aplikasi anda ke halaman log masuk selepas mereka mengklik pada pautan, anda boleh melakukan sesuatu seperti ini:

{isLoggedIn ? : }

Dalam contoh ini, kami menggunakan pembolehubah boolean isLoggedIn (yang perlu ditetapkan di tempat lain) sebagai syarat kami apabila kami harus melakukan pengalihan. Jika ia benar, maka kami memberikan komponen Laman Utama kami; jika tidak, kami melakukan ubah hala.

Bagaimanakah anda mengubah hala selepas 5 saat bertindak balas

Untuk mengubah hala selepas 5 saat dalam Penghala React, anda boleh menggunakan fungsi setTimeout() untuk memanggil kaedah history.push() dengan laluan yang dikehendaki sebagai hujah.

Contoh:
import { useHistory } daripada "react-router-dom";
sejarah const = useHistory();
setTimeout(() => {
history.push(“/redirectedPage”);
}, 5000);