Selesai: Bagaimana untuk mengubah hala dalam React Router v6

Kemaskini terakhir: 09/11/2023
Pengarang Jejak Sumber JavaScript

Masalah utama yang berkaitan dengan ubah hala dalam React Router v6 ialah sintaks untuk ubah hala telah berubah dengan ketara daripada versi sebelumnya. Dalam v6, komponen Ubah hala mesti digunakan dan bukannya elemen, dan to prop mesti disediakan dengan objek yang mengandungi sifat nama laluan. Selain itu, sebarang prop tambahan seperti parameter keadaan atau pertanyaan juga mesti disertakan dalam objek ini. Ini boleh menyukarkan pembangun yang biasa menggunakan sintaks yang lebih mudah bagi versi terdahulu React Router.

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

1. import { Redirect } daripada 'react-router-dom';
– Baris ini mengimport komponen Ubah hala daripada perpustakaan react-router-dom.

2.
– Baris ini mencipta komponen Laluan dengan laluan tepat "/laluan lama".

3.
– Baris ini menggunakan komponen Ubah hala untuk mengubah hala daripada “/path-lama” ke “/path-baru”.

Bagaimanakah saya boleh mengubah hala dalam React Router v6

v6

React Router v6 menyediakan komponen Ubah hala yang boleh digunakan untuk mengubah hala pengguna dari satu halaman ke halaman yang lain. Untuk menggunakan komponen Redirect, anda perlu mengimportnya daripada pakej react-router-dom. Komponen Ubah hala mengambil dua prop: dari dan ke. Prop "dari" ialah laluan halaman semasa dan prop "ke" ialah laluan halaman yang anda mahu ubah hala pengguna ke. Contohnya, jika anda ingin mengubah hala pengguna dari /homepage ke /about, kod anda akan kelihatan seperti ini:

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

Apakah penghala tindak balas?

React Router ialah perpustakaan penghalaan untuk React yang membenarkan pembangun membuat aplikasi satu halaman dengan navigasi dan penghalaan berasaskan negeri yang dinamik. Ia membantu untuk memastikan UI selari dengan URL, menjadikannya lebih mudah untuk pengguna berkongsi dan menanda halaman URL. React Router juga menyediakan ciri berkuasa seperti pemuatan malas, perlindungan laluan dan pengendalian peralihan lokasi.

Jenis Penghala dalam tindak balas

React Router ialah perpustakaan penghalaan untuk React yang membolehkan pembangun membuat aplikasi satu halaman dengan navigasi dan penghalaan URL. Ia menyediakan tiga jenis penghala: BrowserRouter, HashRouter, dan MemoryRouter.

BrowserRouter: Penghala ini menggunakan API sejarah HTML5 untuk memastikan UI anda selari dengan URL. Ia digunakan apabila anda ingin menggunakan URL sebenar dalam aplikasi anda.

HashRouter: Penghala ini menggunakan bahagian cincang URL (iaitu, #) untuk memastikan UI anda selari dengan URL. Ia digunakan apabila anda tidak mahu menggunakan URL sebenar atau apabila anda memerlukan keserasian dengan penyemak imbas lama yang tidak menyokong API sejarah HTML5.

MemoryRouter: Penghala ini menyimpan sejarah lokasi dalam ingatan dan tidak berinteraksi dengan bar alamat penyemak imbas atau mencipta URL sebenar. Ia berguna untuk tujuan ujian atau untuk persekitaran yang menggunakan URL sebenar tidak diingini (cth, pemaparan sebelah pelayan).

Related posts: