Resolvido: obter consulta de url react router dom v6

O principal problema relacionado à obtenção de consulta do URL React Router DOM v6 é que ele não fornece uma maneira integrada de acessar os parâmetros de consulta. Em vez disso, os desenvolvedores devem analisar manualmente a string de URL e extrair os próprios parâmetros de consulta. Este pode ser um processo tedioso e pode levar a erros se não for feito corretamente. Além disso, se a estrutura da URL mudar, o código pode precisar ser atualizado de acordo.

import { useLocation } from "react-router-dom";

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. “importar { useLocation } de 'react-router-dom';” – Esta linha importa o hook useLocation da biblioteca react-router-dom.
2. “const MyComponent = () => {” – Esta linha declara uma função chamada MyComponent que retornará um componente React.
3. “const location = useLocation();” – Esta linha usa o gancho useLocation importado para obter informações sobre a localização atual do aplicativo (por exemplo, URL).
4. “const queryParams = new URLSearchParams(location.search);” – Esta linha cria um objeto que contém todos os parâmetros de consulta na URL atual (por exemplo, ?myParam=foo).
5. O restante do código está apenas retornando um componente React com uma tag h1 e p que exibe o valor de myParam na string de consulta da URL (se existir).

Reagir roteador Dom

React Router DOM é uma biblioteca de roteamento para React que permite aos desenvolvedores criar e gerenciar rotas em seus aplicativos React. Ele fornece uma API para navegar no aplicativo, permitindo que os desenvolvedores definam rotas declarativamente, renderizem componentes com base na URL atual e façam links entre diferentes partes do aplicativo. Ele também oferece suporte a recursos como correspondência de rota dinâmica, rastreamento de localização e guardas de navegação.

Como obtenho a string de consulta no roteador react v6

v6

No React Router v6, você pode acessar os parâmetros da string de consulta usando o hook useLocation. Este gancho retorna um objeto de localização que contém informações sobre a URL atual, incluindo nome do caminho, pesquisa, hash e propriedades de estado. A propriedade de pesquisa contém os parâmetros da string de consulta como uma string. Você pode então analisar essa string para obter um objeto contendo todos os parâmetros da string de consulta.
Por exemplo:
const {pesquisa} = useLocation();
const params = new URLSearchParams(pesquisa);
const param1 = params.get('param1');