Wie übergebe ich Requisiten in Verbindung mit 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} />

Ü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'}}} />

Link (Suche):

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

Zugriff auf Daten (Funktionskomponente). ):

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

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

Beispiel:

class App extends React.Component {
  render() {
    return (
      <div>
        <Link to={{pathname: '/ideas', query: {foo: 'bar'}}} />
        <RouteHandler />
      </div>
    );
  }
}

class Ideas extends React.Component {
  render() {
    const { match, location } = this.props;
    console.log('props form link', this.props);
    return <p>{location.query.foo}</p>;
  }
}

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!