Wie übergebe ich Requisiten an Zielkomponenten im Link des React Routers?

Props in Link React-Router übergeben

Die Link-Komponente von React-Router ermöglicht die Übergabe von Eigenschaften an Zielkomponenten. Es ist jedoch von entscheidender Bedeutung, die richtige Routenkonfiguration sicherzustellen, um die Datenübertragung zu erleichtern.

Das Problem tritt auf, wenn der Routenpfad nicht mit der beabsichtigten Eigenschaftsabfrage übereinstimmt. Im bereitgestellten Code ist die für die Zielkomponente fehlt ein entsprechender Pfad:

<Route name="ideas" handler={CreateIdeaView} />

Um das Problem zu beheben und Eigenschaften über den Link zu übergeben, geben Sie den Pfad in der Routenkonfiguration an und stellen Sie sicher, dass er mit den Parametern im übereinstimmt. Komponente:

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />

Der Platzhalterparameter :testvalue entspricht der im übergebenen Eigenschaft:

<Link to="ideas" params={{ testvalue: "hello" }} />

Auf Eigenschaften kann jetzt in der Rendermethode der Zielkomponente zugegriffen werden:

render: function() {
  console.log(this.props.match.params.testvalue); // logs "hello"
}

Mithilfe von Hooks in Funktionskomponenten können Sie auf Requisiten wie folgt zugreifen:

const CreatedIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // logs "hello"
}

Alternativ können Sie es auch so verwenden, wenn Sie Abfrageparameter anstelle von Pfadparametern übergeben müssen :

<Link to={{pathname: '/ideas', query: {testvalue: "hello"}}} />

In der Zielkomponente:

componentDidMount() {
    console.log(this.props.location.query.testvalue) // logs "hello"
}

Das obige ist der detaillierte Inhalt vonWie übergebe ich Requisiten an Zielkomponenten im Link des React Routers?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!