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

Question

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

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

Et je veux obtenir des paramètres de requête dans les composants HomePage . J'ai trouvé location.search param, qui ressemble à ceci: ?key=value , donc ce n'est pas analysé.

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

Answer 1

La capacité d'analyser les chaînes de requête a été prise en dehors de la V4 car il y a eu de demandes au cours des années à soutenir la mise en œuvre différente. Avec cela, l'équipe a décidé qu'il serait mieux pour les utilisateurs de décider de ce que la mise en œuvre ressemble. Nous vous recommandons d'importer une chaîne de requête lib. Voici celui 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 maternelle et il fonctionne pour vos besoins

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

Vous pouvez lire plus au sujet de la décision ici

Answer 2

La réponse donnée est solide.

Si vous souhaitez 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.

Answer 3

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

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

 getUrlParameter('key');
 

retournera value

Answer 4

Je faisais des recherches sur les paramètres pour réagir routeur v4, et ils ne l'utilisaient pas pour la 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 simple.

 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

Answer 5

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