Terpecahkan: Cara mengarahkan ulang di React Router v6

Masalah utama terkait redirect di React Router v6 adalah sintaks untuk redirect telah berubah secara signifikan dari versi sebelumnya. Di v6, komponen Redirect harus digunakan sebagai pengganti elemen, dan to prop harus dilengkapi dengan objek yang berisi properti pathname. Selain itu, setiap prop tambahan seperti status atau parameter kueri juga harus disertakan dalam objek ini. Ini dapat mempersulit pengembang yang terbiasa menggunakan sintaks yang lebih sederhana dari React Router versi sebelumnya.

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 } dari 'react-router-dom';
– Baris ini mengimpor komponen Redirect dari pustaka react-router-dom.

2.
– Baris ini membuat komponen Rute dengan jalur persis “/jalur lama”.

3.
– Baris ini menggunakan komponen Redirect untuk mengalihkan dari “/jalur lama” ke “/jalur baru”.

Bagaimana saya bisa mengarahkan ulang di React Router v6

v6

React Router v6 menyediakan komponen Redirect yang dapat digunakan untuk mengalihkan pengguna dari satu halaman ke halaman lainnya. Untuk menggunakan komponen Redirect, Anda perlu mengimpornya dari paket react-router-dom. Komponen Redirect mengambil dua props: dari dan ke. Prop “from” adalah path dari halaman saat ini, dan prop “to” adalah path dari halaman yang ingin Anda arahkan ke pengguna. Misalnya, jika Anda ingin mengalihkan pengguna dari /homepage ke /about, kode Anda akan terlihat seperti ini:

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

Apa router reaksinya?

React Router adalah pustaka perutean untuk React yang memungkinkan pengembang membuat aplikasi satu halaman dengan navigasi dan perutean berbasis negara yang dinamis. Ini membantu menjaga UI tetap sinkron dengan URL, sehingga memudahkan pengguna untuk membagikan dan mem-bookmark URL. React Router juga menyediakan fitur canggih seperti pemuatan lambat, perlindungan rute, dan penanganan transisi lokasi.

Jenis Router dalam bereaksi

React Router adalah pustaka perutean untuk React yang memungkinkan pengembang membuat aplikasi satu halaman dengan navigasi dan perutean URL. Ini menyediakan tiga jenis router: BrowserRouter, HashRouter, dan MemoryRouter.

BrowserRouter: Router ini menggunakan API riwayat HTML5 agar UI Anda tetap sinkron dengan URL. Ini digunakan saat Anda ingin menggunakan URL asli di aplikasi Anda.

HashRouter: Router ini menggunakan bagian hash dari URL (yakni, #) agar UI Anda tetap sinkron dengan URL. Ini digunakan saat Anda tidak ingin menggunakan URL asli atau saat Anda membutuhkan kompatibilitas dengan browser lama yang tidak mendukung API riwayat HTML5.

MemoryRouter: Router ini menyimpan riwayat lokasi di memori dan tidak berinteraksi dengan bilah alamat browser atau membuat URL asli. Ini berguna untuk tujuan pengujian atau untuk lingkungan di mana penggunaan URL sebenarnya tidak diinginkan (mis., perenderan sisi server).