Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menyalurkan Data dengan Cekap Antara Halaman Penghala Reaksi?

Bagaimana untuk Menyalurkan Data dengan Cekap Antara Halaman Penghala Reaksi?

Linda Hamilton
Lepaskan: 2024-12-17 06:59:25
asal
629 orang telah melayarinya

How to Efficiently Pass Data Between React Router Pages?

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>
Salin selepas log masuk

v6 (Imperatif):

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

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

v5 (Deklaratif):

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

v5 (Imperatif):

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

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

Terima keadaan di destinasi komponen:

v6:

const { state: { infoId } = {} } = useLocation();
Salin selepas log masuk

v5:

if (props.location && props.location.state && props.location.state.infoId) {
  // Access info ID
}
Salin selepas log masuk

Pilihan 2: Lulus Sesuatu dalam Laluan URL

Sertakan ID item dalam URL laluan:

<Link to={`/home/userDetails/${info.id}`}>...</Link>
Salin selepas log masuk

Terima parameter dalam komponen destinasi:

v6:

const { infoId } = useParams();
Salin selepas log masuk

v5:

const infoId = props.match.params.infoId;
Salin selepas log masuk

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>
Salin selepas log masuk
Salin selepas log masuk

v6 (Imperatif):

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

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

v5 (Deklaratif):

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

v5 (Imperatif):

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

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

Terima param pertanyaan di destinasi komponen:

v6:

const [searchParams] = useSearchParams();
const infoId = searchParams.get("infoId");
Salin selepas log masuk

v5:

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

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan