Teilen Sie ein Beispiel für die Verwendung von React zum Abrufen von Routing-Parametern in einer Komponente

In diesem Artikel wird hauptsächlich erläutert, wie React Routing-Parameter in Komponenten erhält. Interessierte Freunde können sich auf

Routing-Parameter

Angenommen, wir haben viele Listenseiten, bis auf den dynamischen Inhalt dieser Seiten sind die anderen Seitenteile gleich. Wie müssen wir zu diesem Zeitpunkt das Routing und die Komponenten konfigurieren?

In diesem Szenario müssen Sie die Routing-Parameterfunktion verwenden und eine Routing-Konfiguration mit Parametern hinzufügen.

import List from './component/list';

<Route path="list/:id" component={List} />

Beachten Sie, dass die :id im Pfad-

-Attribut der Parameter (param) der Route ist. Werfen wir einen Blick auf die Komponenten der Listenseite.

/list 对应了 list.js

import React from 'react';
class List extends React.Component {
 render () {
 return (
 <p>
 <h3>This is List page.</h3>
 <p>The list page id is 
  <b style={{color: &#39;red&#39;}}>{this.props.params.id}</b>
 </p>
 </p>
 );
 }
};
export default List;

In der Listenkomponente können Sie direkt über this.props.params.id auf die tatsächlichen Parameterwerte zugreifen (der ID-Schlüssel ist hier derselbe wie Der definierte Pfad entspricht der ID. React Router leitet alle Routing-Daten über Requisiten an die Seitenkomponente weiter, sodass Sie sehr bequem auf Routing-bezogene Daten zugreifen können.

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel für die Verwendung von React zum Abrufen von Routing-Parametern in einer Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!