Bagaimanakah Saya Boleh Menghantar Data Antara Halaman Menggunakan Penghala Reaksi?

Melalui Data Antara Halaman Penghala React

Ikhtisar

Penghala Reaksi ialah perpustakaan yang berkuasa untuk melaksanakan navigasi dalam aplikasi React. Ia membolehkan anda menentukan laluan dan mengendalikan peralihan halaman dengan lancar. Satu kes penggunaan biasa ialah menghantar data antara halaman untuk paparan atau pemprosesan selanjutnya.

Penyelesaian:

Pilihan 1: Keadaan Laluan

Dengan React Router v6, anda boleh menggunakan keadaan harta komponen Pautan atau Navigasi untuk menghantar data semasa menavigasi. Data ini boleh diakses melalui objek lokasi pada halaman destinasi.

Pilihan 2: Laluan URL

Pilihan lain adalah untuk memasukkan data ke dalam laluan URL menggunakan notasi :. Data boleh diambil daripada prop padanan pada halaman destinasi.

Pilihan 3: Rentetan Pertanyaan URL

Sama seperti menggunakan laluan URL, anda boleh menambahkan data pada rentetan pertanyaan URL menggunakan ? simbol. Data ini boleh diakses melalui cangkuk useSearchParams atau sifat carian objek lokasi pada halaman destinasi.

Contoh:

Pertimbangkan senario di mana anda ingin menavigasi daripada senarai pengguna kepada pengguna halaman butiran.

// User List Page
import React, { Component } from "react";

export default class User extends Component {
  render() {
    return (
      {this.props.users.map(user => (
        <Link key={user.id} to={`/user/${user.id}`}>
          {user.name}
        </Link>
      ))}
    );
  }
}

// User Details Page
import React from "react";
import { useParams } from "react-router-dom";

export default function UserDetails() {
  const { id } = useParams();
  return (
    {id}
  );
}

Dalam contoh ini, apabila pengguna mengklik pada nama pengguna, mereka dilayari ke halaman UserDetails, yang menerima ID pengguna melalui laluan URL.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghantar Data Antara Halaman Menggunakan Penghala Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!