Selesai: lulus data menavigasi react router dom

Masalah utama yang berkaitan dengan menghantar data semasa menavigasi dengan React Router DOM ialah data mesti dihantar dalam rentetan pertanyaan URL. Ini bermakna bahawa sebarang maklumat sensitif mesti dikodkan sebelum dihantar, kerana ia akan kelihatan dalam URL. Selain itu, jika data terlalu besar, ia mungkin melebihi panjang maksimum URL dan menyebabkan ralat. Akhir sekali, jika anda menggunakan React Router DOM untuk menavigasi antara halaman dalam aplikasi, anda juga mesti mengurus keadaan secara manual dan menjejaki perubahan untuk memastikan semua komponen mempunyai akses kepada 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 mengimport cangkuk useHistory daripada perpustakaan react-router-dom.
// Baris 3: Baris ini mengisytiharkan pemalar yang dipanggil MyComponent yang merupakan fungsi yang mengembalikan JSX.
// Baris 4: Baris ini mengisytiharkan pemalar dipanggil sejarah yang diperuntukkan kepada cangkuk useHistory yang diimport daripada react-router-dom.
// Baris 6: Baris ini mengisytiharkan fungsi yang dipanggil handleClick yang mengambil satu parameter, data.
// Baris 7: Baris ini menggunakan objek sejarah untuk menolak laluan baharu ke tindanan dengan nama laluan '/myroute' dan data keadaan diluluskan sebagai objek.
// Baris 9 – 11: Baris ini mengembalikan JSX yang mengandungi elemen butang dengan pengendali acara onClick yang memanggil handleClick dan menghantar data sebagai hujah.

React Router Dom

React Router DOM ialah perpustakaan penghalaan untuk React yang membenarkan pembangun mencipta dan mengurus laluan dalam aplikasi React mereka. Ia menyediakan komponen teras yang diperlukan untuk membina aplikasi web berbilang halaman yang kompleks dengan React, termasuk komponen seperti Pautan, Laluan, Suis dan BrowserRouter. Ia juga menyediakan ciri seperti padanan laluan dinamik dan penjejakan lokasi. Dengan React Router DOM, pembangun boleh membuat aplikasi satu halaman dengan mudah dengan berbilang paparan dan laluan tanpa perlu mengurus URL atau sejarah penyemak imbas secara manual.

Bagaimanakah anda menghantar data melalui navigasi dalam react-router-Dom

Dalam Penghala React, data boleh dihantar melalui navigasi menggunakan objek keadaan API sejarah. Objek keadaan boleh diakses melalui prop mana-mana komponen yang diberikan oleh a komponen. Untuk menghantar data, anda boleh menambahkannya pada objek keadaan apabila memanggil fungsi navigasi. Sebagai contoh:

const { sejarah } = this.props;
history.push({
nama laluan: '/some/path',
nyatakan: { someData: 'data' }
});