Wie kann man Daten effizient zwischen React-Router-Seiten weitergeben?-js-Tutorial-php.cn

Wie kann man Daten effizient zwischen React-Router-Seiten weitergeben?

Linda Hamilton

Freigeben： 2024-12-17 06:59:25

Original

629 Leute haben es durchsucht

How to Efficiently Pass Data Between React Router Pages?

So übergeben Sie Daten von einer Seite an eine andere mit React Router

Problem:

Navigation aus einer Liste von Elementen zu einer Detailseite, die die Details des ausgewählten weitergibt Artikel.

Lösung:

Es gibt drei Hauptoptionen für die Weitergabe von Daten zwischen Seiten mithilfe von React Router:

Option 1: Pass Route Status

Senden Sie die Artikel-ID in den Routen Zustand:

v6 (Deklarativ):

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

Nach dem Login kopieren

v6 (Imperativ):

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

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

Nach dem Login kopieren

v5 (Deklarativ):

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

Nach dem Login kopieren

v5 (Imperativ):

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

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

Nach dem Login kopieren

Erhalten Sie den Status im Ziel Komponente:

v6:

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

Nach dem Login kopieren

v5:

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

Nach dem Login kopieren

Option 2: Etwas übergeben im URL-Pfad

Fügen Sie die Artikel-ID in die URL ein Pfad:

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

Nach dem Login kopieren

Empfangen Sie den Parameter in der Zielkomponente:

v6:

const { infoId } = useParams();

Nach dem Login kopieren

v5:

const infoId = props.match.params.infoId;

Nach dem Login kopieren

Option 3: Übergeben Sie etwas in der URL-Abfrage Zeichenfolge

Fügen Sie die Element-ID an die URL-Abfragezeichenfolge an:

v6 (deklarativ):

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

Nach dem Login kopieren

v6 (Imperativ):

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

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

Nach dem Login kopieren

v5 (Deklarativ):

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

Nach dem Login kopieren

v5 (Imperativ):

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

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

Nach dem Login kopieren

Erhalten Sie den Abfrageparameter im Ziel Komponente:

v6:

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

Nach dem Login kopieren

v5:

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann man Daten effizient zwischen React-Router-Seiten weitergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!