Diselesaikan: pass data navigasikan reaksi router dom

Masalah utama terkait pengiriman data saat bernavigasi dengan React Router DOM adalah bahwa data harus diteruskan dalam string kueri URL. Artinya, setiap informasi sensitif harus dikodekan sebelum diteruskan, karena akan terlihat di URL. Selain itu, jika data terlalu besar, dapat melebihi panjang maksimum URL dan menyebabkan kesalahan. Terakhir, jika Anda menggunakan React Router DOM untuk menavigasi antar halaman dalam aplikasi, Anda juga harus mengelola status secara manual dan melacak perubahan untuk memastikan bahwa semua komponen memiliki akses ke data yang sama.

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

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// Baris 1: Baris ini mengimpor kait useHistory dari pustaka react-router-dom.
// Baris 3: Baris ini mendeklarasikan sebuah konstanta bernama MyComponent yang merupakan fungsi yang mengembalikan JSX.
// Baris 4: Baris ini mendeklarasikan sebuah konstanta bernama history yang ditugaskan ke hook useHistory yang diimpor dari react-router-dom.
// Baris 6: Baris ini mendeklarasikan fungsi bernama handleClick yang mengambil satu parameter, data.
// Baris 7: Baris ini menggunakan objek riwayat untuk mendorong rute baru ke tumpukan dengan nama jalur '/myroute' dan menyatakan data diteruskan sebagai objek.
// Baris 9 – 11: Baris ini menampilkan JSX yang berisi elemen tombol dengan event handler onClick yang memanggil handleClick dan meneruskan data sebagai argumen.

Bereaksi Router Dom

React Router DOM adalah pustaka perutean untuk React yang memungkinkan pengembang membuat dan mengelola rute dalam aplikasi React mereka. Ini menyediakan komponen inti yang diperlukan untuk membangun aplikasi web multi-halaman yang kompleks dengan React, termasuk komponen seperti Tautan, Rute, Switch, dan BrowserRouter. Ini juga menyediakan fitur seperti pencocokan rute dinamis dan pelacakan lokasi. Dengan React Router DOM, pengembang dapat dengan mudah membuat aplikasi satu halaman dengan banyak tampilan dan rute tanpa harus mengelola URL atau riwayat browser secara manual.

Bagaimana Anda mengirimkan data melalui navigasi di react-router-Dom

Di React Router, data dapat diteruskan melalui navigasi menggunakan objek status API riwayat. Objek status dapat diakses melalui props dari setiap komponen yang dirender oleh a komponen. Untuk meneruskan data, Anda dapat menambahkannya ke objek status saat memanggil fungsi navigasi. Sebagai contoh:

const { sejarah } = ini.alat peraga;
sejarah.push({
nama jalur: '/beberapa/jalur',
status: {someData: 'data' }
});