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;

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.