Masalah utama yang terkait dengan pengiriman data dalam riwayat router reaksi, push adalah bahwa data tidak bertahan di seluruh penyegaran halaman. Saat pengguna me-refresh halaman, data yang disimpan di history.push akan hilang dan tidak akan tersedia untuk digunakan pada pemuatan halaman berikutnya. Hal ini dapat menyebabkan perilaku yang tidak diharapkan dan dapat menyebabkan masalah saat mencoba mengakses atau menyimpan data dari pemuatan halaman sebelumnya.
import { useHistory } from "react-router-dom";
const MyComponent = () => {
const history = useHistory();
const handleClick = (data) => {
history.push({ pathname: "/mypage", state: data });
};
return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};
1. Baris ini mengimpor kait useHistory dari pustaka react-router-dom, yang menyediakan akses ke objek riwayat yang melacak lokasi saat ini di aplikasi.
2. Baris ini mendeklarasikan komponen fungsional bernama MyComponent dan menugaskannya ke variabel konstanta.
3. Baris ini menggunakan hook useHistory yang diimpor pada baris 1 untuk mendapatkan akses ke objek history dan menugaskannya ke variabel konstanta yang disebut history.
4. Baris ini mendeklarasikan fungsi bernama handleClick yang mengambil argumen bernama data dan mendorong objek yang berisi nama jalur dan properti status ke tumpukan riwayat menggunakan history.push().
5. Baris ini mengembalikan elemen tombol dengan event handler onClick yang memanggil handleClick() dengan objek yang berisi someData sebagai argumennya saat diklik oleh pengguna.
Dorongan sejarah
Push riwayat di React Router adalah metode yang digunakan untuk mengubah URL secara terprogram di browser tanpa menyebabkan penyegaran halaman. Ini memungkinkan pengembang untuk membuat aplikasi satu halaman yang masih dapat menangani navigasi dan tautan dalam. Push riwayat bekerja dengan menggunakan API riwayat browser, yang memungkinkan pengembang untuk memanipulasi URL saat ini tanpa memuat ulang halaman. Hal ini memungkinkan pengguna untuk bernavigasi di antara berbagai halaman aplikasi tanpa harus memuat ulang setiap saat. Selain itu, ini dapat digunakan untuk tautan dalam, memungkinkan pengguna untuk menautkan langsung ke bagian tertentu dari suatu aplikasi.
Bagaimana cara menggunakan riwayat di router reaksi
React Router menyediakan cara untuk menggunakan riwayat dalam aplikasi React Anda. Riwayat memungkinkan Anda untuk melacak halaman saat ini, serta halaman sebelumnya yang telah dikunjungi. Ini berguna untuk membuat navigasi dan melacak tindakan pengguna.
Untuk menggunakan histori di React Router, Anda perlu membuat objek histori menggunakan metode createHistory() dari paket histori. Ini akan memberi Anda akses ke metode seperti push(), replace(), dan go(). Metode ini memungkinkan Anda memanipulasi URL browser dan bernavigasi di antara berbagai rute di aplikasi Anda. Anda juga dapat menggunakan metode listen() untuk mendengarkan perubahan dalam URL dan memperbarui aplikasi Anda sesuai dengan itu.
Setelah Anda membuat objek histori, Anda dapat meneruskannya ke komponen router saat membuatnya. Ini akan memungkinkan React Router untuk melacak semua perubahan yang dibuat oleh pengguna dan memperbaruinya.
Menggunakan sejarah dengan React Router memudahkan pengembang untuk membuat komponen navigasi yang kuat yang mudah dipahami dan berinteraksi dengan pengguna.
