Diselesaikan: navigasi reaksi router 6

Masalah utama yang terkait dengan navigasi React Router 6 adalah ia tidak menyediakan cara untuk meneruskan props atau status ke rute target. Artinya, jika Anda perlu meneruskan data dari satu rute ke rute lainnya, Anda harus menggunakan pustaka seperti React Query atau Redux. Selain itu, sistem navigasi didasarkan pada URL dan bukan komponen, sehingga dapat menyulitkan pengembang yang terbiasa bekerja dengan komponen, bukan URL.

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

const history = useHistory();

history.navigate("/path/to/page");

1. Baris ini mengimpor hook useHistory dari library react-router-dom.
2. Baris ini membuat konstanta baru bernama history dan menugaskannya ke hook useHistory.
3. Baris ini menggunakan konstanta histori untuk menavigasi ke jalur yang ditentukan, dalam hal ini “/path/to/page”.

Arahkan

React Router adalah pustaka perutean canggih yang dibangun di atas React yang membantu pengembang membuat, mengelola, dan menangani navigasi dalam aplikasi mereka. Ini memberikan solusi perutean lengkap untuk aplikasi React dengan fitur seperti pencocokan rute dinamis, penanganan transisi lokasi, pemulihan gulir, dan banyak lagi. Navigasi adalah bagian penting dari React Router yang memungkinkan pengembang untuk secara terprogram menavigasi di antara berbagai rute dalam aplikasi mereka. Ini menyediakan API untuk menavigasi antar rute menggunakan objek sejarah atau dengan memberikan nama jalur secara langsung. Dengan Navigate, pengembang dapat dengan mudah membuat tautan ke halaman lain di dalam aplikasi mereka dan memberi pengguna kemampuan untuk beralih di antara tampilan yang berbeda tanpa memuat ulang halaman.

Bagaimana cara menavigasi dengan router reaksi?

Menavigasi dengan React Router adalah proses yang sederhana. Untuk memulai, Anda harus menginstal paket React Router dari npm. Setelah diinstal, Anda dapat menggunakan komponen untuk menentukan rute dalam aplikasi Anda. Itu component membutuhkan dua props: path dan component. Prop path menentukan jalur URL yang akan memicu rute, dan prop komponen adalah komponen React yang akan dirender ketika rute tersebut cocok.

Anda juga dapat menggunakan komponen lain seperti , , dan untuk lebih menyesuaikan pengalaman perutean Anda. Itu komponen memungkinkan Anda untuk membuat link antara rute yang berbeda dalam aplikasi Anda, sedangkan komponen memungkinkan Anda untuk mengarahkan pengguna dari satu rute ke rute lainnya. Akhirnya, komponen memungkinkan Anda merender hanya satu dari banyak komponen berdasarkan rute mana yang cocok terlebih dahulu.

Menggunakan komponen ini bersama-sama memberi Anda kontrol yang kuat atas cara pengguna menavigasi melalui aplikasi Anda dan memberikan cara yang intuitif bagi mereka untuk melakukannya.