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

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>

v6 (Impératif) :

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

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

v5 (Déclaratif) :

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

v5 (Impératif) :

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

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

Recevoir l'état dans la destination composant :

v6 :

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

v5 :

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

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>

Recevoir le paramètre dans le composant de destination :

v6 :

const { infoId } = useParams();

v5 :

const infoId = props.match.params.infoId;

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>

v6 (Impératif) :

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

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

v5 (Déclaratif) :

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

v5 (Impératif) :

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

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

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

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");
}

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!