Como pegar a query string no React JS

Neste artigo você aprenderá a como pegar a query string no React, um recurso muito importante para diversas aplicações!

Fala programador(a), beleza? Bora conhecer mais um recurso do React!

As Query Strings são uma parte importante da interação web.

Elas nos permitem passar dados entre páginas, armazenar dados de estado no URL e muito mais.

Neste artigo, vamos explorar como pegar a query string em uma aplicação React JS.

Para ilustrar este processo, vamos usar os Hooks do React, uma adição recente à biblioteca que nos permite trabalhar com o estado e outros recursos do React sem escrever uma classe.

O que é uma query string?

Primeiro, vamos entender o que é uma query string. Basicamente, é uma parte de um URL que contém informações adicionais que não cabem na estrutura hierárquica normal do URL.

Ela geralmente começa com um caractere de interrogação (?) e pode conter várias partes, chamadas parâmetros, separados por um caractere e (&).

Um exemplo de URL com uma query string seria algo como: www.exemplo.com/pagina?param1=valor1&param2=valor2.

Pegando a Query String em React JS

Em React, podemos pegar a query string usando o objeto window.location e a biblioteca URLSearchParams.

import React, { useEffect, useState } from 'react';

const QueryStringComponent = () => {
  const [query, setQuery] = useState('');

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    setQuery(params.toString());
  }, []);

  return (
    <div>
      <h2>Query String</h2>
      <p>{query}</p>
    </div>
  );
}

export default QueryStringComponent;

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

No exemplo acima, nós criamos um componente funcional que inicializa um estado query com uma string vazia.

Quando o componente é montado (o useEffect é executado), criamos um novo objeto URLSearchParams com a query string do URL atual (window.location.search).

O método toString() é então usado para converter os parâmetros de URL em uma string, que é armazenada no estado query.

Lidando com vários parâmetros de consulta

Muitas vezes, os URLs contêm vários parâmetros de consulta. O URLSearchParams facilita o trabalho com vários parâmetros.

import React, { useEffect, useState } from 'react';

const MultipleParamsComponent = () => {
  const [params, setParams] = useState({});

  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    let params = {};
    for(let param of searchParams) {
      params[param[0]] = param[1];
    }
    setParams(params);
  }, []);

  return (
    <div>
      <h2>Parâmetros da Query String</h2>
      {Object.entries(params).map(([key, value]) => (
        <p key={key}>{`${key}: ${value}`}</p>
      ))}
    </div>
  );
}

export default MultipleParamsComponent;

Neste exemplo, inicializamos o estado params com um objeto vazio. Quando o componente é montado, criamos um objeto URLSearchParams como antes.

No entanto, desta vez, iteramos sobre os parâmetros, armazenando cada um como uma propriedade do objeto params.

Depois de terminarmos, atualizamos o estado params com o novo objeto.

Integrando com react-router

Se você estiver usando a biblioteca react-router para manipular rotas em sua aplicação React, as coisas ficam um pouco mais fáceis.

O pacote react-router-dom possui um Hook chamado useLocation, que nos fornece informações sobre a URL atual.

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

const RouterQueryStringComponent = () => {
  const [params, setParams] = useState({});
  const location = useLocation();

  useEffect(() => {
    const searchParams = new URLSearchParams(location.search);
    let params = {};
    for(let param of searchParams) {
      params[param[0]] = param[1];
    }
    setParams(params);
  }, [location]);

  return (
    <div>
      <h2>Parâmetros da Query String com react-router</h2>
      {Object.entries(params).map(([key, value]) => (
        <p key={key}>{`${key}: ${value}`}</p>
      ))}
    </div>
  );
}

export default RouterQueryStringComponent;

Neste exemplo, utilizamos o useLocation para obter o objeto de localização atual, que inclui a query string na propriedade search.

No useEffect, passamos location como uma dependência, garantindo que qualquer mudança na URL dispare o efeito novamente, atualizando os parâmetros de consulta no estado.

Práticas recomendadas

Ao trabalhar com query strings, é importante seguir algumas práticas recomendadas.

Primeiro, nunca confie na query string para armazenar informações sensíveis, como tokens de autenticação ou informações pessoais do usuário.

As query strings são visíveis na URL e podem ser facilmente manipuladas.

Além disso, lembre-se de que as query strings são sempre strings. Isso significa que você precisará converter os valores para o tipo correto antes de usá-los.

O URLSearchParams fornece o método get que facilita a obtenção de valores individuais, mas você ainda precisará converter os valores manualmente.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Compreender como trabalhar com query strings em uma aplicação React é crucial para criar experiências de usuário dinâmicas e interativas.

Seja usando o objeto window.location diretamente ou a integração com o react-router, o React torna relativamente simples pegar e manipular a query string.

Esperamos que este artigo tenha ajudado você a começar a trabalhar com query strings em suas aplicações React. Lembre-se, a prática leva à perfeição!

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Resposta rápida:

Pra pegar a query string no React você cria um new URLSearchParams(window.location.search) dentro de um useEffect e guarda o resultado no estado do componente

Se o seu projeto já usa react-router, o caminho é o mesmo, só que a leitura vem do location.search do Hook useLocation, assim ela acompanha a troca de rota

Do ? pra frente tudo é texto, então converta o valor antes de usar como número ou booleano

Abaixo tem os dois caminhos com código completo, os vários parâmetros de uma vez e as pegadinhas que mais pegam gente 🙂

Pegando só um parâmetro específico:

O toString() devolve a query string inteira numa string só, e na prática quase nunca é isso que você quer, né?

Na maioria dos casos você quer UM valor: o termo da busca, a página, o filtro

Pra isso existe o get

[bloco de código]

const params = new URLSearchParams(window.location.search)

const busca = params.get(‘busca’)

Tome cuidado! Se o parâmetro não estiver na URL, não vem valor nenhum, e aí seu componente quebra na hora de usar

Então sempre trate a ausência com um valor padrão:

[bloco de código]

const busca = params.get(‘busca’) || ”

E quando o mesmo parâmetro aparece duas vezes?

Esse caso aparece direto em filtro de e-commerce, tipo ?tag=react&tag=hooks

Se liga nisso: no laço do exemplo acima, o segundo valor sobrescreve o primeiro e você perde metade do filtro sem nem perceber

A saída é acumular num array quando a chave se repetir:

[bloco de código]

const searchParams = new URLSearchParams(window.location.search)

const params = {}

for (let param of searchParams) {

} else { } }

Agora params.tag vem como array quando a tag repete, e como texto simples quando aparece uma vez só

Convertendo os valores da query string:

Tudo que vem da URL é texto, sempre

Então aquele ?pagina=2 não chega como número, chega como a string '2', e ?ativo=true não é booleano, é a palavra escrita

Já me ferrei uma vez comparando página com número e me perguntando por que a condição nunca batia haha

A conversão fica assim:

[bloco de código]

const params = new URLSearchParams(window.location.search)

const paginaBruta = params.get(‘pagina’) const numero = Number(paginaBruta) const pagina = paginaBruta && !Number.isNaN(numero) ? numero : 1

const ativo = params.get(‘ativo’) === ‘true’

Repare que o valor padrão entra na conversão, não depois

Assim uma URL sem pagina, ou com ?pagina=abc digitado na mão pelo usuário, continua caindo na página 1 em vez de virar NaN na sua listagem

window.location ou react-router: qual usar?

A pergunta que sempre aparece, então bora resolver ela

Use o window.location.search quando a leitura é pontual, tipo uma página que recebe um parâmetro na entrada e pronto, ou quando seu projeto nem tem biblioteca de rotas

Use o useLocation quando a URL muda sem a página recarregar

E aqui mora a pegadinha: com o useEffect de array de dependências vazio, o efeito roda UMA vez só, na montagem

Se o usuário aplica outro filtro e a URL muda, seu estado continua com o valor antigo e a tela não acompanha

Com o location na dependência, cada mudança de URL dispara o efeito de novo e o estado se atualiza junto

Regra prática: leitura única, window.location resolve; tela que reage a filtro, busca e paginação, vai de Hook de rota

Erros comuns ao pegar a query string no React:

Antes de sair codando, se liga nos tropeços mais frequentes:

Ler a query string no corpo do componente em vez do useEffect, o que gera leitura a cada renderização sem necessidade

Esquecer a dependência de localização no useEffect e ficar com o estado congelado quando a URL muda

Usar o valor sem testar se o parâmetro existe, e quebrar a tela na primeira visita sem filtro

Comparar texto com número, porque a URL nunca devolve número

Sobrescrever parâmetros repetidos no laço, perdendo filtros em silêncio

Jogar dado sensível na URL, que fica visível, vai pro histórico do navegador e ainda viaja no link compartilhado

Se você passar por essa lista antes de subir, já evita a maior parte do retrabalho 😀

Perguntas frequentes sobre query string no React:

Preciso de alguma biblioteca pra ler a query string?

Não

O URLSearchParams já dá conta de ler e separar os parâmetros

A biblioteca de rotas entra quando você precisa reagir à URL mudando sem recarregar a página

Qual a diferença entre query string e parâmetro de rota?

A query string vem depois do ? e costuma ser opcional: filtro, busca, ordenação, paginação

O parâmetro de rota faz parte do caminho da URL e normalmente identifica o recurso, tipo o id de um produto

Um é ‘como eu quero ver a lista’, o outro é ‘qual item eu estou vendo’

Por que meu componente não atualiza quando a query string muda?

Quase sempre é a dependência do useEffect

Com o array vazio ele roda só na montagem

Coloque a localização na dependência pra cada mudança de URL disparar a leitura de novo

Posso guardar os filtros da tela na URL?

Pode, e é uma das melhores coisas que a query string faz

O usuário compartilha o link e a outra pessoa cai exatamente na mesma listagem filtrada

Só não coloque nada sensível ali, beleza?