Wie kann ich mit React Router Requisiten in Links übergeben?

Requisiten im Link im React-Router übergeben

Bei Verwendung des Komponente in React-Router ist es möglich, Eigenschaften an die neue Ansicht zu übergeben. Verwenden Sie dazu die to-Eigenschaft von und übergeben Sie ein Objekt mit den gewünschten Eigenschaften. Beispiel:

<code class="js"><Link to={{ pathname: '/ideas', query: { testvalue: 'hello' } }}>Create Idea</Link></code>

Greifen Sie in der Zielansicht mit dem folgenden Muster auf die übergebenen Eigenschaften zu:

<code class="js">render() {
    console.log(this.props.match.params.testvalue, this.props.location.query.backurl)
    return <span>{testvalue} {backurl}</span>    
}</code>

Hinweis: Die obige Syntax ist inzwischen veraltet

In aktualisierten Funktionskomponenten, die Hooks verwenden:

<code class="js">const CreatedIdeaView = () => {
    const { testvalue } = useParams();
    const { query, search } = useLocation(); 
    console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'))
    return <span>{testvalue} {backurl}</span>    
}</code>

Weitere Überlegungen

• Stellen Sie sicher, dass für die Zielroute ein passender Pfad definiert ist das übergebene Eigentum erhalten. In diesem Beispiel sollte die Route wie folgt definiert werden:

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

• Die in React-Router verwendete Link-Komponente wurde in neueren Versionen aktualisiert. Die Syntax zur Übergabe von Eigenschaften kann je nach verwendeter Version unterschiedlich sein.

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