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

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

Et je veux obtenir des paramètres de requête dans le HomePagecomposant. J'ai trouvé location.searchparam, qui ressemble à ceci ?key=value:, donc il n'est pas analysé.

Quelle est la bonne façon d'obtenir les paramètres de requête avec react-router v4?

La capacité d'analyser les chaînes de requête a été supprimée de la V4 car il y a eu des demandes au fil des ans pour prendre en charge différentes implémentations. Sur ce, l'équipe a décidé qu'il serait préférable pour les utilisateurs de décider à quoi ressemblait cette implémentation. 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 URLSearchParamssi vous voulez quelque chose de natif et cela fonctionne pour 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

La réponse donnée est solide.

Si vous souhaitez utiliser le module qs au lieu de la chaîne de requête (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.

La réponse acceptée fonctionne bien, mais si vous ne souhaitez pas installer de package 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, ' '));
  };

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

getUrlParameter('key');

reviendra value

Une autre approche utile pourrait être d'utiliser le prêt à l'emploi URLSearchParamscomme celui-ci;

  let { search } = useLocation();

   const query = new URLSearchParams(search);
   const paramField = query.get('field');
   const paramValue = query.get('value');

Propre, lisible et ne nécessite pas de module. Plus d'informations ci-dessous;

• https://reacttraining.com/react-router/web/example/query-parameters
• https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

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

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

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);

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

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

Très facile

utilisez juste un crochet useParams()

Exemple:

Routeur :

<Route path="/user/:id" component={UserComponent} />

Dans votre composant :

export default function UserComponent() {

  const { id } = useParams();

  return (
    <>{id}</>
  );
}

Sans besoin d'aucun paquet:

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

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