Eine kurze Erläuterung verschiedener Möglichkeiten zum Übergeben von Parametern beim React-Routing

Die erste Methode zur Parameterübergabe ist die dynamische Routing-Parameterübergabe.

Durch Setzen des Pfadattributs des Links wird die Route weitergegeben. Wenn auf das Link-Tag geklickt wird, wird die gesamte weitergegebene URL in der URL-Adresse oben angezeigt

<Link to='/home?name=dx'>Startseite</Link>

Wenn Sie die übergebenen Parameter tatsächlich abrufen möchten, müssen Sie dies in der entsprechenden Unterkomponente tun.
this.props.location.search ruft die Zeichenfolge ab und analysiert sie dann manuell

Da die Parameter für den Benutzer sichtbar sind, ist das Übergeben und Abrufen dieser Parameter mühsam und wird daher nicht empfohlen.

Die zweite Methode zur Parameterübergabe: implizite Routing-Parameterübergabe

<Link zu={{
     Pfadname: 'about',
     Zustand: {
      Name: "dx"
     }
    }}>Über</Link>

Die sogenannte implizite Routenparameterübergabe bedeutet, dass die Parameterinformationen nicht in der URL angezeigt werden. Wenn Sie auf das Link-Tag klicken und die übergebenen Parameter abrufen möchten, können Sie diese über this.props.location.state in der entsprechenden Routenkomponente abrufen.

Empfohlen, sicherer und bequemer, um die übergebenen Parameter zu erhalten

Die dritte Methode zur Parameterübergabe besteht darin, Parameter zwischen Komponenten zu übergeben

Wann verwenden?
Wenn eine Routing-Komponente Parameter von einer übergeordneten Komponente empfangen muss

Ändern Sie die Art und Weise, wie Routen-Tags Komponenten über Komponentenattribute aktivieren. Normalerweise werden Routen-Tags beim Routing verwendet.

//Prägnant und klar, aber es können keine Parameter von der übergeordneten Komponente empfangen werden <Route path='/test' component={Test}></Route>

Nach der Transformation

<Link to='/test'>Test</Link>
<Routenpfad='/test' render={(routeProps) => {
 //routeProps ist der von der Routing-Komponente übergebene Rückgabeparameter (
     //Erweitern Sie im Fall der ursprünglichen Routing-Komponentenparameter die Bindung der von der übergeordneten Komponente an die untergeordnete Komponente übergebenen Parameter <Test {...routeProps} name='dx' age={18} />
     )
 }}></Route> 

Wenn auf das Link-Tag geklickt wird, erhält this.props in der entsprechenden Test-Unterkomponente die von der übergeordneten Komponente übergebenen Parameter und die Parameter der Routing-Komponente selbst. Es wird dringend empfohlen, dass die Parameter leicht zu übergeben sind und die empfangenen Parameter sehr praktisch sind. Darüber hinaus können die Parameter der Routing-Komponente selbst weiterhin empfangen werden, was sicher ist und von Benutzern nicht gesehen wird.

Die vierte Parameterübergabemethode mit Router-Komponente höherer Ordnung bindet Routing-Parameter an untergeordnete Komponenten

Wann wird es mit Router verwendet?

Wenn Sie die Routenparameter in einer Unterkomponente abrufen möchten, müssen Sie die Unterkomponente des Routentags in der Route verwenden, an die die Routenparameter gebunden werden sollen.

Um das Problem des Abrufens von Routing-Parametern für Unterkomponenten zu lösen, die nicht an Routen-Tags gebunden sind, müssen Sie withRouter verwenden

Wird im Allgemeinen bei Schaltflächen wie „Zur Startseite zurückkehren“ und „Zur vorherigen Ebene zurückkehren“ verwendet.

importiere React von „react“;
importiere BackHome aus „./backhome“;
exportiere Standardklasse Test erweitert React.Component {
 rendern () {
  Konsole.log(diese.Eigenschaften)
  zurückkehren (
   <div>
    Dies ist der Inhalt des Tests //Der Button zum Zurückkehren zur Startseite wird nicht über das Route-Tag gerendert, daher gibt es in this.props der Unterkomponente <BackHome>Zur Startseite zurückkehren</BackHome> keinen Route-Parameter. 
   </div>
  )
 }
}

importiere React von „react“;
//Importieren mitRoute
importiere {withRouter} von „react-router-dom“;
Klasse BackHome erweitert React.Component {
 gehe nach Hause = () => {
  //Bei Verwendung von withRouter muss die Komponente Routing-Parameter und -Methoden in this.props haben. //Andernfalls wird ein Fehler gemeldet this.props.history.push({
   Pfadname: '/home',
   Zustand: {
    Name: 'dx' // Ebenso können Sie Parameter an die Komponente übergeben, die der Home-Route durch den Status entspricht}
  })
 }
 rendern () {
  zurückkehren (
   <button onClick={this.goHome}>diese.props.children</button>
  )
 }
}
//Beim Exportieren das withRouter-Tag verwenden, um die BackHome-Komponente als Parameter zu übergeben export default withRouter(BackHome)

Es ist sehr wichtig, wann Sie es verwenden müssen, deshalb wird es weiterhin empfohlen.

Damit ist dieser Artikel über verschiedene Möglichkeiten zum Übergeben von Parametern beim React-Routing abgeschlossen. Weitere relevante Inhalte zum Übergeben von Parametern beim React-Routing finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!