Selesai: menghantar data dalam sejarah penghala tindak balas%2Cpush

Masalah utama yang berkaitan dengan menghantar data dalam sejarah penghala tindak balas, push ialah data tidak berterusan merentasi penyegaran halaman. Apabila pengguna memuat semula halaman, data yang disimpan dalam history.push akan hilang dan tidak akan tersedia untuk digunakan pada pemuatan halaman berikutnya. Ini boleh membawa kepada tingkah laku yang tidak dijangka dan boleh menyebabkan masalah apabila cuba mengakses atau menyimpan data daripada 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 mengimport cangkuk useHistory daripada perpustakaan react-router-dom, yang menyediakan akses kepada objek sejarah yang menjejaki lokasi semasa dalam apl.

2. Baris ini mengisytiharkan komponen berfungsi yang dipanggil MyComponent dan memberikannya kepada pembolehubah malar.

3. Baris ini menggunakan cangkuk useHistory yang diimport dalam baris 1 untuk mendapatkan akses kepada objek sejarah dan menetapkannya kepada pembolehubah malar yang dipanggil sejarah.

4. Baris ini mengisytiharkan fungsi yang dipanggil handleClick yang mengambil argumen yang dipanggil data dan menolak objek yang mengandungi nama laluan dan sifat keadaan ke tindanan sejarah menggunakan history.push().

5. Baris ini mengembalikan elemen butang dengan pengendali acara onClick yang memanggil handleClick() dengan objek yang mengandungi someData sebagai hujahnya apabila diklik oleh pengguna.

Tolak sejarah

Tolak sejarah dalam Penghala Reaksi ialah kaedah yang digunakan untuk menukar URL secara pemprograman dalam penyemak imbas tanpa menyebabkan penyegaran halaman. Ia membolehkan pembangun mencipta aplikasi satu halaman yang masih mampu mengendalikan navigasi dan pautan dalam. Tolak sejarah berfungsi dengan menggunakan API sejarah penyemak imbas, yang membolehkan pembangun memanipulasi URL semasa tanpa memuatkan semula halaman. Ini membolehkan pengguna menavigasi antara halaman aplikasi yang berbeza tanpa perlu memuat semula setiap kali. Selain itu, ia boleh digunakan untuk pautan dalam, membolehkan pengguna memaut terus ke bahagian tertentu aplikasi.

Bagaimanakah saya menggunakan sejarah dalam penghala tindak balas

React Router menyediakan cara untuk menggunakan sejarah dalam aplikasi React anda. Sejarah membolehkan anda menjejak halaman semasa, serta mana-mana halaman sebelumnya yang telah dilawati. Ini berguna untuk membuat navigasi dan menjejaki tindakan pengguna.

Untuk menggunakan sejarah dalam React Router, anda perlu mencipta objek sejarah menggunakan kaedah createHistory() daripada pakej sejarah. Ini akan memberi anda akses kepada kaedah seperti push(), replace(), dan go(). Kaedah ini membolehkan anda memanipulasi URL penyemak imbas dan menavigasi antara laluan berbeza dalam aplikasi anda. Anda juga boleh menggunakan kaedah listen() untuk mendengar perubahan dalam URL dan mengemas kini aplikasi anda dengan sewajarnya.

Sebaik sahaja anda telah mencipta objek sejarah, anda boleh menghantarnya ke dalam komponen penghala anda semasa menciptanya. Ini akan membolehkan React Router menjejaki semua perubahan yang dibuat oleh pengguna dan mengemas kini dengan sewajarnya.

Menggunakan sejarah dengan React Router memudahkan pembangun mencipta komponen navigasi berkuasa yang mudah difahami dan berinteraksi dengan pengguna.