web-dev-qa-db-fra.com

Comment analyser la chaîne de requête dans react-router v4

Dans react-router v3, je pouvais y accéder avec props.location.query.foo (Si l'emplacement actuel était ?foo=bar)

Dans [email protected]props.location N’a que props.location.search Avec une chaîne de caractères comme ?foo=bar&other=thing.

J'ai peut-être besoin d'analyser et de déconstruire manuellement cette chaîne pour trouver la valeur de foo ou other.

Capture d'écran de console.log(this.props): enter image description here (Notez comment de ?artist=band Ici je voudrais obtenir la valeur de artist qui est la valeur band)

reactjsreact-routerreact-router-dom
32
Peter Bengtsson

On dirait que vous avez déjà supposé correct. La possibilité d’analyser les chaînes de requête a été supprimée de la V4 car il a été demandé au fil des années de prendre en charge différentes implémentations. Avec cela, l'équipe a décidé qu'il était préférable que les utilisateurs décident de la mise en œuvre de cette implémentation. Nous vous recommandons d'importer une chaîne de requête lib. Le celui que vous avez mentionné a très bien fonctionné pour moi jusqu'à présent.

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

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

Vous pouvez aussi utiliser new URLSearchParams _ si vous voulez quelque chose d’indigène et que cela répond à vos besoins

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

Vous pouvez en savoir plus sur la décision ici

74
Tyler McGinnis

Vous pouvez obtenir l'erreur suivante lors de la création d'une version de production optimisée lors de l'utilisation du module query-string .

Échec de la minification du code à partir de ce fichier: ./node_modules/query-string/index.js:8

Pour surmonter cela, veuillez utiliser le module alternatif appelé stringquery qui effectue le même processus sans aucun problème lors de l'exécution de la construction.

import querySearch from "stringquery";

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

Je vous remercie.

18
Balasubramani M

Je profère ma petite ES6 fonction de forme, génial, léger et utile:

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;
                }, {}
            )
        : {}
};

Tout est là, j'espère vous aider.

5
AmerllicA

Heureux d'avoir trouvé ce post. Merci pour les liens, après quelques heures, mon code a finalement été mis à jour.

Pour ceux qui utilisent query-string, vous devrez peut-être faire quelque chose comme:

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

C'est arrivé dans mon cas, et this.props.location.search.theUrlYouWant refuserait de travailler. La deuxième option mentionnée par Tyler a également fonctionné pour moi avec quelques ajustements similaires.

4
DORRITO