Bagaimana untuk Menyalurkan Data dengan Cekap Antara Halaman Penghala Reaksi?

Cara Menghantar Data dari Satu Halaman ke Halaman Lain Menggunakan Penghala Reaksi

Masalah:

Menavigasi daripada senarai item ke halaman butiran, menyampaikan butiran yang dipilih item.

Penyelesaian:

Terdapat tiga pilihan utama untuk menghantar data antara halaman menggunakan React Router:

Pilihan 1: Laluan Laluan Nyatakan

Hantar ID item dalam laluan nyatakan:

v6 (Deklaratif):

<Link to="/home/userDetails" state={{ infoId: info.id }}>...</Link>

v6 (Imperatif):

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

const navigate = useNavigate();
navigate("/home/userDetails", { state: { infoId: info.id } });

v5 (Deklaratif):

<Link to={{ pathname: '/home/userDetails', state: { infoId: info.id } }}>...</Link>

v5 (Imperatif):

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

const history = useHistory();
history.push({ pathname: '/home/userDetails', state: { infoId: info.id } });

Terima keadaan di destinasi komponen:

v6:

const { state: { infoId } = {} } = useLocation();

v5:

if (props.location && props.location.state && props.location.state.infoId) {
  // Access info ID
}

Pilihan 2: Lulus Sesuatu dalam Laluan URL

Sertakan ID item dalam URL laluan:

<Link to={`/home/userDetails/${info.id}`}>...</Link>

Terima parameter dalam komponen destinasi:

v6:

const { infoId } = useParams();

v5:

const infoId = props.match.params.infoId;

Pilihan 3: Lulus Sesuatu dalam Pertanyaan URL Rentetan

Tambahkan ID item pada rentetan pertanyaan URL:

v6 (Deklaratif):

<Link to={{ pathname: '/home/userDetails', search: `?infoId=${info.id}` }}>...</Link>

v6 (Imperatif):

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

const navigate = useNavigate();
navigate({ pathname: '/home/userDetails', search: `?infoId=${info.id}` });

v5 (Deklaratif):

<Link to={{ pathname: '/home/userDetails', search: `?infoId=${info.id}` }}>...</Link>

v5 (Imperatif):

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

const history = useHistory();
history.push({ pathname: '/home/userDetails', search: `?infoId=${info.id}` });

Terima param pertanyaan di destinasi komponen:

v6:

const [searchParams] = useSearchParams();
const infoId = searchParams.get("infoId");

v5:

if (props.location && props.location.search) {
  const searchParams = new URLSearchParams(props.location.search);
  const infoId = searchParams.get("infoId");
}

Atas ialah kandungan terperinci Bagaimana untuk Menyalurkan Data dengan Cekap Antara Halaman Penghala Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!