Obter valores de parâmetros de URL de query String em React

1. Roteador React V3
2. React Router V4 e React Router V5

Ao longo do processo de criação de um aplicativo React, ocasionalmente pode ser necessário extrair um valor de parâmetro da string de consulta. Isso permitirá que você faça referência ao valor parameter em todo o seu aplicativo.

Com o lançamento do React Router v4 em 2017, a propriedade analisada this.props.location.query foi removida. Os desenvolvedores tiveram que encontrar uma nova abordagem para ler o valor do parâmetro de strings de consulta. Neste artigo, daremos uma olhada nas soluções para versões antigas e mais recentes do React.

Roteador React V3

Extrair o valor do parâmetro da string query no React Router v3 é fácil. Esta versão do React faz todo o trabalho para você e fornece o local analisado como um adereço. Se você verificar o valor do seguinte objeto:

this.props.location.query

Você descobrirá que ele contém os pares key-value de todos os parâmetros em sua consulta. (A consulta é a parte do seu URL que vem depois do sinal ?)

Se o objeto query não incluir os parâmetros que você está procurando, você também deve verificar os valores dos parâmetros path, que podem ser acessados ​​em:

this.props.match.params.redirectParam

Contanto que você esteja executando um aplicativo com React Router v3 instalado, seus componentes aceitam props, você pode obter valores de parâmetro de strings query e path.

A partir da v4, o objeto this.props.location.query foi removido. O principal motivo para sua remoção foi permitir que os desenvolvedores criassem maneiras exclusivas de armazenar strings de query.

React Router V4 e React Router V5

As consultas no React Router v4 ainda estão acessíveis, mas os desenvolvedores devem convertê-las em uma string por conta própria. Bibliotecas como qs e query-string foram criadas para resolver esse problema exato.

Em versões mais recentes do React Router, você pode analisar seu objeto query usando a interface atualizada e a biblioteca query-string.

const queryToStr = require('query-string');
const result = queryToStr.parse(this.props.location.search);

para componentes de classe

O exemplo acima se aplica a componentes de classe no React.

Usar as bibliotecas para analisar this.props.location.search pode retornar um objeto query analisado, com pares de parâmetros key-value e seus valores.

para componentes funcionais

Nos últimos anos, a comunidade React começou a desistir de componentes de classe em favor de componentes funcionais. A principal razão por trás da mudança foi a nova capacidade dos componentes funcionais de usar ganchos React.

Ao extrair valores de parâmetro de uma string query, em vez de usar o valor de this.props.location.search, use a instância de gancho useLocation().

O gancho não retorna o objeto query analisado. Você ainda precisa analisar a instância do gancho para obter pares de parâmetros key-value e seus valores.

Se você executar o aplicativo com a versão v4 (ou superior) do React-Router, o código a seguir deve fornecer o resultado desejado:

const queryToStr = require('query-string');
const result = queryToStr.parse(useLocation().search);

Graças ao gancho useLocation(), este código parece muito mais limpo.