Heim > Web-Frontend > js-Tutorial > Wie übergebe ich Requisiten in Verbindung mit React-Router?

Wie übergebe ich Requisiten in Verbindung mit React-Router?

Susan Sarandon
Freigeben: 2024-11-01 13:20:29
Original
917 Leute haben es durchsucht

How to Pass Props in Link with React-Router?

Übergabe von Requisiten in Link React-Router

Die Link-Komponente von React-Router ermöglicht die Weitergabe von Daten zwischen Komponenten. Definieren Sie dazu einen Parameter in der to-Requisite des Links, und auf den Wert für diesen Parameter kann in der verknüpften Komponente mit this.props zugegriffen werden.

Problem:

Der bereitgestellte Code konnte keine Requisiten an die verknüpfte Komponente übergeben, da der Routenpfad in der -Komponente fehlte. Definition.

Lösung:

Fügen Sie den Pfadparameter zum hinzu. Definition:

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />
Nach dem Login kopieren

Übergabe von Daten mithilfe des Standorts:

Bei Verwendung von React-Router v4/v5 können Daten über das Standortobjekt übergeben werden:

Link (Abfrage):

<Link to={{pathname: '/', query: {backUrl: 'theLinkData'}}} />
Nach dem Login kopieren

Link (Suche):

<Link to={{pathname: '/', search: '?backUrl=theLinkData'}} />
Nach dem Login kopieren

Zugriff auf Daten (Funktionskomponente). ):

const CreatedIdeaView = () => {
  const { query, search } = useLocation();
  console.log(query.backUrl, new URLSearchParams(search).get('backUrl'));
};
Nach dem Login kopieren

Zugriff auf Daten (Klassenkomponente):

class CreateIdeaView extends React.Component {
  render() {
    console.log(this.props.location.query.backUrl);
    return <div>{this.props.location.query.backUrl}</div>;
  }
}
Nach dem Login kopieren

Beispiel:

class App extends React.Component {
  render() {
    return (
      <div>
        <Link to={{pathname: '/ideas', query: {foo: 'bar'}}} />
        <RouteHandler />
      </div>
    );
  }
}
Nach dem Login kopieren
class Ideas extends React.Component {
  render() {
    const { match, location } = this.props;
    console.log('props form link', this.props);
    return <p>{location.query.foo}</p>;
  }
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie übergebe ich Requisiten in Verbindung mit React-Router?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage