Wie kann ich mit React Router Daten zwischen Seiten übertragen?

Übergabe von Daten zwischen React Router-Seiten

Übersicht

React Router ist eine leistungsstarke Bibliothek zur Implementierung der Navigation in React-Anwendungen. Damit können Sie Routen definieren und Seitenübergänge nahtlos verarbeiten. Ein häufiger Anwendungsfall ist die Weitergabe von Daten zwischen Seiten zur Anzeige oder Weiterverarbeitung.

Lösung:

Option 1: Route State

Mit React Router v6 können Sie den Status verwenden Eigenschaft der Link- oder Navigate-Komponenten, um beim Navigieren Daten zu übergeben. Auf diese Daten kann über das Standortobjekt auf der Zielseite zugegriffen werden.

Option 2: URL-Pfad

Eine weitere Option besteht darin, Daten mithilfe der :-Notation in den URL-Pfad einzubinden. Die Daten können aus den Match-Requisiten auf der Zielseite abgerufen werden.

Option 3: URL-Abfragezeichenfolge

Ähnlich wie bei der Verwendung des URL-Pfads können Sie mithilfe von Daten an die URL-Abfragezeichenfolge anhängen ? Symbol. Auf diese Daten kann über den useSearchParams-Hook oder die Sucheigenschaft des Standortobjekts auf der Zielseite zugegriffen werden.

Beispiel:

Stellen Sie sich ein Szenario vor, in dem Sie von einer Benutzerliste zu einem Benutzer navigieren möchten Detailseite.

// User List Page
import React, { Component } from "react";

export default class User extends Component {
  render() {
    return (
      {this.props.users.map(user => (
        <Link key={user.id} to={`/user/${user.id}`}>
          {user.name}
        </Link>
      ))}
    );
  }
}

// User Details Page
import React from "react";
import { useParams } from "react-router-dom";

export default function UserDetails() {
  const { id } = useParams();
  return (
    {id}
  );
}

Wenn in diesem Beispiel ein Benutzer auf den Namen eines Benutzers klickt, wird er zu der Seite navigiert Seite „Benutzerdetails“, die die ID des Benutzers über den URL-Pfad erhält.

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