Abrufen von URL-Parameterwerten aus der AbfrageZeichenkette in React

1. React Router V3
2. React Router V4 und React Router V5

Während des gesamten Erstellungsprozesses einer React-App müssen Sie möglicherweise gelegentlich einen Parameterwert aus der AbfrageZeichenkette extrahieren. Auf diese Weise können Sie in Ihrer App auf den Wert parameter verweisen.

Mit der Veröffentlichung von React Router v4 im Jahr 2017 wurde die geparste Eigenschaft this.props.location.query entfernt. Entwickler mussten einen neuen Ansatz finden, um den Parameterwert aus AbfrageZeichenketten zu lesen. In diesem Artikel werfen wir einen Blick auf die Lösungen für alte und neuere Versionen von React.

React Router V3

Das Extrahieren des Parameterwertes aus dem String query in React Router v3 ist einfach. Diese Version von React erledigt die ganze Arbeit für Sie und stellt den geparsten Ort als Requisite bereit. Wenn Sie den Wert des folgenden Objekts überprüfen:

this.props.location.query

Sie werden feststellen, dass es die key-value-Paare aller Parameter Ihrer Abfrage enthält. (Abfrage ist der Teil Ihrer URL, der nach dem Zeichen ? kommt)

Wenn das query-Objekt die gesuchten Parameter nicht enthält, dann sollten Sie auch die Parameterwerte path überprüfen, die zugänglich sind unter:

this.props.match.params.redirectParam

Solange Sie eine App mit installiertem React Router v3 ausführen, akzeptieren Ihre Komponenten props, Sie können Parameterwerte aus query-Strings und path abrufen.

Ab v4 wurde das Objekt this.props.location.query entfernt. Der Hauptgrund für die Entfernung bestand darin, Entwicklern die Möglichkeit zu geben, einzigartige Möglichkeiten zum Speichern von query-Strings zu schaffen.

React Router V4 und React Router V5

queries in React Router v4 sind weiterhin zugänglich, aber Entwickler müssen sie selbst in einen String umwandeln. Bibliotheken wie qs und query-string wurden erstellt, um genau dieses Problem zu lösen.

In neueren React Router-Versionen können Sie Ihr query-Objekt mit der aktualisierten Schnittstelle und der query-string-Bibliothek parsen.

const queryToStr = require('query-string');
const result = queryToStr.parse(this.props.location.search);

für Klassenkomponenten

Das obige Beispiel gilt für Klassenkomponenten in React.

Die Verwendung der Bibliotheken zum Parsen von this.props.location.search kann ein geparstes query-Objekt mit key-value-Paaren von Parametern und ihren Werten zurückgeben.

für Funktionskomponenten

In den letzten Jahren hat die React-Community begonnen, Klassenkomponenten zugunsten funktionaler Komponenten aufzugeben. Der Hauptgrund für den Wechsel war die neue Fähigkeit der Funktionskomponenten, React-Hooks zu verwenden.

Wenn Sie Parameterwerte aus einem query-String extrahieren, verwenden Sie anstelle des Wertes von this.props.location.search die Instanz des Hooks useLocation().

Der Hook gibt kein geparstes query-Objekt zurück. Sie müssen noch die Instanz des Hooks parsen, um Schlüssel-Wert-Paare von Parametern und ihren Werten zu erhalten.

Wenn Sie die Anwendung mit der Version v4 (oder höher) von React-Router ausführen, sollte der folgende Code Ihnen das gewünschte Ergebnis liefern:

const queryToStr = require('query-string');
const result = queryToStr.parse(useLocation().search);

Dank des Hooks useLocation() sieht dieser Code viel sauberer aus.