web-dev-qa-db-fra.com

Comment obtenir les paramètres de requête dans react-router v4

J'utilise react-router-dom 4.0.0-beta.6 dans mon projet . J'ai un code comme celui-ci:

<Route exact path="/home" component={HomePage}/>

Et je veux obtenir les paramètres de requête dans le composant HomePage . J'ai trouvé le paramètre location.search, qui ressemble à ceci: ?key=value, il est donc non analysé.

Quel est le bon moyen d'obtenir des paramètres de requête avec react-router v4?

react-routerreact-router-v4react-router-dom
62
andrfas

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. Nous vous recommandons d'importer une chaîne de requête lib. En voici un que j'utilise

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

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

Vous pouvez également utiliser new URLSearchParams si vous voulez quelque chose de natif et que cela répond à vos besoins.

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

Vous pouvez en savoir plus sur la décision ici

120
Tyler McGinnis

La réponse donnée est solide.

Si vous voulez utiliser le module qs au lieu de query-string (leur popularité est à peu près égale), voici la syntaxe:

const query = qs.parse(props.location.search, {
  ignoreQueryPrefix: true
})

L'option ignoreQueryPrefix consiste à ignorer le point d'interrogation principal.

5
fisch2

La réponse acceptée fonctionne bien, mais si vous ne souhaitez pas installer de paquet supplémentaire, vous pouvez utiliser ceci:

getUrlParameter = (name) => {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    let results = regex.exec(window.location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  };

http://www.google.co.in/?key=value donné

getUrlParameter('key');

retournera value

3
Kartik_Agarwal

Je faisais des recherches sur les paramètres pour réagir routeur v4, et ils ne l'ont pas utilisé pour v4, pas comme réagir routeur v2/3. Je vais laisser une autre fonction - peut-être que quelqu'un trouvera cela utile. Vous avez seulement besoin d'es6 ou de javascript.

function parseQueryParams(query) {
  //You get a '?key=asdfghjkl1234567890&val=123&val2&val3=other'
  const queryArray = query.split('?')[1].split('&');
  let queryParams = {};
  for (let i = 0; i < queryArray.length; i++) {
    const [key, val] = queryArray[i].split('=');
    queryParams[key] = val ? val : true;
  }
  /* queryParams = 
     {
      key:"asdfghjkl1234567890",
      val:"123",
      val2:true,
      val3:"other"
     }
  */
  return queryParams;
}

En outre, cette fonction peut être améliorée

2
Xopsy

Je viens de faire cela, donc je n'ai pas besoin de changer toute la structure du code (où vous utilisez une requête du magasin de routeur redux) si vous mettez à jour le routeur v4 ou supérieur à partir d'une version inférieure.

https://github.com/saltas888/react-router-query-middleware

0
Dimitris Saltaferis

Sans besoin de forfait:

const params = JSON.parse(JSON.stringify(this.props.match.params));

Ensuite, vous pouvez accéder aux paramètres associés avec params.id

0
mesarikaya

Hein?

queryfie(string){
    return string
        .slice(1)
        .split('&')
        .map(q => q.split('='))
        .reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}

queryfie(this.props.location.search);
0
Faheem