Como obter parâmetros de consulta no react-router v4

87

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?

andrfas
fonte

Respostas:

181

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

Tyler McGinnis
fonte
12
Não use URLSearchParams sem um polyfill. Em março de 2018, o Googlebot usa o Chrome 41 ( developers.google.com/search/docs/guides/rendering ), que não oferece suporte a URLSearchParams, e seu aplicativo será interrompido se for usado em um caminho crítico ( caniuse.com/#feat=urlsearchparams ).
Joshua Robinson
12

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.

fisch2
fonte
1
Agradável. em janeiro de 2019, qs tinha 12 milhões de downloads semanais contra 2,7 milhões para string de consulta.
oyalhi
6

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

kartikag01
fonte
Muito obrigado, cara .. a biblioteca “string de consulta” não funcionou para mim por algum motivo, mas sua solução funcionou perfeitamente. Eu estava usando "react-dom": "^ 16.0.0", "react-router": "^ 4.2.0", "react-router-dom": "^ 4.2.2" e "query-string": "^ 5.0.1",
Rohan_Paul
isso pressupõe apenas que você tenha um único parâmetro em sua string de consulta. O OP pergunta claramente como obter parâmetros de consulta - e é isso que os módulos npm mencionados fazem. Transforme isso em uma função que retorna um objeto de pares de chave / valor da string de consulta e isso seria muito útil!
Andy Lorenz
@AndyLorenz isso funciona até mesmo quando você tem vários parâmetros de consulta, chame a função dada com a chave cujo valor você deseja obter. O método sim também pode ser transformado para fornecer um mapa de valores-chave.
kartikag01
isso funcionaria, mas não é uma boa solução @Kartik_Agarwal. (a) Isso exigiria várias execuções essencialmente do mesmo código (potencialmente caro), (b) variáveis ​​separadas precisariam ser usadas para cada parâmetro, enquanto idealmente você preencheria um objeto de pares de chave / valor, (c) isso requer você para saber seus nomes de parâmetro e verificação adicional para ver se eles existem ou não. Se esse fosse o meu código, eu procuraria uma regex que pudesse pegar todos os parâmetros de forma iterativa, mas tenho que admitir que as regexs fazem meus ouvidos sangrar!
Andy Lorenz
5

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

Xopsy
fonte
2

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);
Faheem
fonte
0

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

Dimitris Saltaferis
fonte
1
Um link para uma solução é bem-vindo, mas certifique-se de que sua resposta seja útil sem ele: adicione contexto ao link para que seus outros usuários tenham uma ideia do que ele é e por que está lá, depois cite a parte mais relevante da página que você ' novo link para caso a página de destino não esteja disponível. Respostas que são pouco mais do que um link podem ser excluídas .
domingo,
0

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}</>
  );
}
CommonSenseCode
fonte
Isso não funciona para o caso de uso descrito na pergunta (pelo menos não com React-Router v4: reactrouter.com/web/api/Hooks/useparams ) useParams apenas expõe os parâmetros de caminho, não os parâmetros de pesquisa.
Bennit
-4

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

mesarikaya
fonte
3
this.props.match.paramscontém parâmetros de caminho, esta questão é sobre parâmetros de consulta.
Hubert