Estou usando o react-router-dom 4.0.0-beta.6 no meu projeto. Eu tenho um código como o seguinte:

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

E eu quero obter parâmetros de consulta no HomePagecomponente. Encontrei o location.searchparam, que se parece com isto ?key=value:, então não foi analisado.

Qual é a maneira certa de obter parâmetros de consulta com o react-router v4?

A capacidade de analisar cadeias de caracteres de consulta foi retirada da V4 porque houve solicitações ao longo dos anos para oferecer suporte a implementações diferentes. Com isso, a equipe decidiu que seria melhor para os usuários decidir como seria a implementação. Recomendamos importar uma string de consulta lib. Aqui está um que eu uso

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

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

Você também pode usar new URLSearchParamsse quiser algo nativo e funcionar para suas necessidades

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

Você pode ler mais sobre a decisão aqui

A resposta dada é sólida.

Se você quiser usar o módulo qs em vez da string de consulta (eles são quase iguais em popularidade), aqui está a sintaxe:

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

A opção ignoreQueryPrefix é ignorar o ponto de interrogação inicial.

A resposta aceita funciona bem, mas se você não quiser instalar um pacote adicional, você pode usar este:

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

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

getUrlParameter('key');

retornará value

Outra abordagem útil poderia ser usar o padrão URLSearchParamsassim;

  let { search } = useLocation();

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

Limpo, legível e não requer módulo. Mais informações abaixo;

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

Eu estava pesquisando sobre parâmetros para o roteador react v4, e eles não o usaram para v4, não como o react router v2 / 3. Vou deixar outra função - talvez alguém a considere útil. Você só precisa de es6 ou javascript simples.

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

Além disso, esta função pode ser melhorada

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

Acabei de fazer isso para não precisar alterar toda a estrutura do código (onde você usa a consulta da loja do roteador redux) se você atualizar para reagir ao roteador v4 ou superior de uma versão anterior.

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

Muito fácil

apenas use o gancho useParams()

Exemplo:

Roteador :

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

Em seus componentes :

export default function UserComponent() {

  const { id } = useParams();

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

Sem necessidade de nenhum pacote:

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

Então você pode alcançar os parâmetros relacionados com params.id