Sto usando react-router-dom 4.0.0-beta.6 nel mio progetto. Ho un codice come il seguente:

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

E voglio ottenere i parametri della query nel HomePagecomponente. Ho trovato location.searchparam, che assomiglia a questo ?key=value:, quindi non è analizzato.

Qual è il modo giusto per ottenere i parametri di query con React-Router v4?

La capacità di analizzare le stringhe di query è stata tolta dalla V4 perché ci sono state richieste nel corso degli anni per supportare diverse implementazioni. Con ciò, il team ha deciso che sarebbe stato meglio per gli utenti decidere l'aspetto di tale implementazione. Si consiglia di importare una stringa di query lib. Eccone uno che uso io

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

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

Puoi anche usarlo new URLSearchParamsse vuoi qualcosa di nativo e funziona per le tue esigenze

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

Puoi leggere di più sulla decisione qui

La risposta data è solida.

Se vuoi usare il modulo qs invece della stringa di query (hanno circa la stessa popolarità), ecco la sintassi:

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

L' opzione ignoreQueryPrefix consiste nell'ignorare il punto interrogativo iniziale.

Un altro approccio utile potrebbe essere quello di utilizzare il fuori dagli schemi in URLSearchParamsquesto modo;

  let { search } = useLocation();

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

Pulito, leggibile e non richiede un modulo. Maggiori informazioni di seguito;

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

La risposta accettata funziona bene, ma se non vuoi installare un pacchetto aggiuntivo, puoi usare questo:

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

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

getUrlParameter('key');

sarà di ritorno value

Stavo facendo ricerche sui parametri per React Router v4 e non l'hanno usato per v4, non come React Router v2 / 3. Lascio un'altra funzione, forse qualcuno la troverà utile. Hai solo bisogno di es6 o semplice 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;
}

Inoltre, questa funzione può essere migliorata

Eh?

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

L'ho appena creato, quindi non è necessario modificare l'intera struttura del codice (dove si utilizza la query dall'archivio router redux) se si aggiorna per reagire al router v4 o superiore da una versione inferiore.

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

Molto facile

basta usare il gancio useParams()

Esempio:

Router :

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

Nel tuo componente :

export default function UserComponent() {

  const { id } = useParams();

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

Senza bisogno di alcun pacchetto:

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

Quindi puoi raggiungere i relativi parametri con params.id