Maison > interface Web > js tutoriel > Comment transmettre efficacement des données entre les pages du routeur React ?

Comment transmettre efficacement des données entre les pages du routeur React ?

Linda Hamilton
Libérer: 2024-12-17 06:59:25
original
635 Les gens l'ont consulté

How to Efficiently Pass Data Between React Router Pages?

Comment transmettre des données d'une page à une autre à l'aide de React Router

Problème :

Navigation à partir d'une liste d'éléments vers une page de détails, transmettant les détails de la sélection item.

Solution :

Il existe trois options principales pour transmettre des données entre les pages à l'aide de React Router :

Option 1 : Passer la route État

Envoyer l'ID de l'article dans le état :

v6 (Déclaratif) :

<Link to="/home/userDetails" state={{ infoId: info.id }}>...</Link>
Copier après la connexion

v6 (Impératif) :

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

const navigate = useNavigate();
navigate("/home/userDetails", { state: { infoId: info.id } });
Copier après la connexion

v5 (Déclaratif) :

<Link to={{ pathname: '/home/userDetails', state: { infoId: info.id } }}>...</Link>
Copier après la connexion

v5 (Impératif) :

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

const history = useHistory();
history.push({ pathname: '/home/userDetails', state: { infoId: info.id } });
Copier après la connexion

Recevoir l'état dans la destination composant :

v6 :

const { state: { infoId } = {} } = useLocation();
Copier après la connexion

v5 :

if (props.location && props.location.state && props.location.state.infoId) {
  // Access info ID
}
Copier après la connexion

Option 2 : Passer quelque chose dans le chemin de l'URL

Inclure l'ID de l'article dans l'URL chemin :

<Link to={`/home/userDetails/${info.id}`}>...</Link>
Copier après la connexion

Recevoir le paramètre dans le composant de destination :

v6 :

const { infoId } = useParams();
Copier après la connexion

v5 :

const infoId = props.match.params.infoId;
Copier après la connexion

Option 3 : transmettre quelque chose dans la requête d'URL Chaîne

Ajouter l'ID de l'élément à la chaîne de requête URL :

v6 (Déclaratif) :

<Link to={{ pathname: '/home/userDetails', search: `?infoId=${info.id}` }}>...</Link>
Copier après la connexion
Copier après la connexion

v6 (Impératif) :

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

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

v5 (Déclaratif) :

<Link to={{ pathname: '/home/userDetails', search: `?infoId=${info.id}` }}>...</Link>
Copier après la connexion
Copier après la connexion

v5 (Impératif) :

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

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

Recevoir le paramètre de requête dans la destination composant :

v6 :

const [searchParams] = useSearchParams();
const infoId = searchParams.get("infoId");
Copier après la connexion

v5 :

if (props.location && props.location.search) {
  const searchParams = new URLSearchParams(props.location.search);
  const infoId = searchParams.get("infoId");
}
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal