web-dev-qa-db-de.com

So analysieren Sie die Abfragezeichenfolge in React-Router v4

In React-Router v3 konnte ich mit props.location.query.foo Darauf zugreifen (wenn der aktuelle Standort ?foo=bar War)

In [email protected]props.location Gibt es nur props.location.search Mit einem String wie ?foo=bar&other=thing.

Vielleicht muss ich diese Zeichenfolge manuell analysieren und dekonstruieren, um den Wert für foo oder other zu finden.

Screenshot von console.log(this.props): enter image description here (Beachten Sie, wie von ?artist=band Hier möchte ich den Wert von artist erhalten, der der Wert von band ist.)

reactjsreact-routerreact-router-dom
32
Peter Bengtsson

Sieht so aus, als hättest du das schon richtig angenommen. Die Möglichkeit, Abfragezeichenfolgen zu analysieren, wurde aus V4 herausgenommen, da im Laufe der Jahre Anforderungen zur Unterstützung unterschiedlicher Implementierungen aufgetreten sind. Damit entschied das Team, dass es am besten für die Benutzer ist, zu entscheiden, wie diese Implementierung aussieht. Es wird empfohlen, eine Abfragezeichenfolge lib zu importieren. Das eines, das du erwähnt hast hat bisher großartig für mich funktioniert.

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

Sie können auch new URLSearchParams wenn Sie etwas Natives wollen und es für Ihre Bedürfnisse funktioniert

const search = props.location.search; // could be '?foo=bar'
const params = new URLSearchParams(search);
const foo = params.get('foo'); // bar

Sie können mehr über die Entscheidung lesen hier

74
Tyler McGinnis

Beim Erstellen eines optimierten Produktionsbuilds mit dem Modul Abfragezeichenfolge wird möglicherweise die folgende Fehlermeldung angezeigt.

Fehler beim Minimieren des Codes aus dieser Datei: ./node_modules/query-string/index.js:8

Um dies zu überwinden, verwenden Sie bitte das alternative Modul stringquery , das den gleichen Vorgang ohne Probleme beim Ausführen des Builds ausführt.

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);

Vielen Dank.

18
Balasubramani M

Ich biete mein kleines ES6 Formfunktion, fantastisch, leicht und nützlich:

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

Alles ist hier, hoffe, dir zu helfen.

5
AmerllicA

Froh, dass ich diesen Beitrag gefunden habe. Vielen Dank für die Links, nach ein paar Stunden habe ich endlich meinen Code aktualisiert.

Für diejenigen von Ihnen, die Query-String verwenden, müssen Sie möglicherweise etwas tun

var nameYouWant = queryString.parse(this.props.location.search).nameYouWant;

Dies geschah in meinem Fall und this.props.location.search.theUrlYouWant würde sich weigern zu arbeiten. Die zweite Option, die Tyler erwähnte, funktionierte auch bei mir mit ähnlichen Optimierungen.

4
DORRITO