2

Estou fazendo um App, usando react com typescript e react-router-dom. Porém estou com muita dificuldade para trabalhar com query params nas rotas. Meu objetivo inicial era apenas receber o token e o email que vem na query params.

O token esta vim no seguinte formato:

http://localhost:3000/User/ConfirmEmail/?token=asdas&[email protected]

routes.tsx

   <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route
          exact
          path="/User/ConfirmEmail/:token"
          component={ConfirmEmail}
        />
      </Switch>
    </Router>

confirmEmail.tsx

interface ParamTypes {
  token: string;
  email: string;
}

const ConfirmEmail: React.FC = () => {
  const { token, email } = useParams<ParamTypes>();

  useEffect(() => {
    console.log(token, email);
  });

  return (
    <>
        {token}
        {email}
    </>
  );
};

Estou a dois dias pesquisando sobre, e encontro pouquíssimas pessoas falando sobre um exemplo parecido. O máximo que encontro é exemplos do react-router-dom que esta na documentação dele. Agradeço a ajuda desde já!

2 Respostas 2

2

Na documentação explica como faz esse tipo de abordagem em suas variaveis Query criando um Hook auxiliar da seguinte forma:

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

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

export { useQuery };

esse código está na documentação e resolvi cria-lo para exemplificação.

Depois disso é só importa o código no seu componente ConfirmEmail ficando com o seguinte layout:

import React from "react";

import { useQuery } from "../../Hooks";

const ConfirmEmail: React.FC = () => {
  const query = useQuery();
  return (
    <>
      <div>Confirm Email</div>
      <div>{query.get("token")}</div>
      <div>{query.get("email")}</div>
    </>
  );
};

export default ConfirmEmail;

Além do mais o seu arquivo que configura as rotas deve também ter algumas modificações nas configurações das rotas:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Home from "./Components/Home";
import ConfirmEmail from "./Components/ConfirmEmail";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/user/confirm-email?token=123456&[email protected]">
                Confirm Email
              </Link>
            </li>
          </ul>
        </nav>
        <div>
          <Switch>
            <Route path="/user/confirm-email">
              <ConfirmEmail />
            </Route>
            <Route path="/" exact>
              <Home />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

  • Nota: nome de rotas coloque todas em minúsculos e se tiver nome composto separados por traço como demonstrados em todos os códigos.

  • Exemplo: ONLINE da própria documentação

2
  • Boa tarde, Muito obrigado pela resposta. Me ajudou bastante aqui, vou conseguir evoluir agora com o projeto. Acho que a minha confusão na documentação foi ver 'URL Paramets' em vez de 'Query Paramets', hahaha, vou seguir a dica de colocar as rotas como sugerido. Obrigado! Commented 20/01/2021 às 20:22
  • @BrunoD.assis se for util vote como resposta da sua pergunta
    – novic
    Commented 20/01/2021 às 21:25
-2

Segue um exemplo de como criar um hook com typescript

import { useLocation } from 'react-router-dom'

export function useQueryParams<T extends Object>(): T {
  const params = new URLSearchParams(useLocation().search)

  let data: { [key: string]: any } = {}

  for (const key of params.keys()) {
    data[key] = params.get(key)
  }

  return data as T
}

dessa forma você poderá utilizar em qualquer componente; com tipagem.

por exemplo:

type Params = {
  email?: string
}

export function Login() {
  const params = useQueryParams<Params>();

  console.log(params?.email);

  return <Container>...</Container>
}

caso você queira receber mais parâmetros basta adicionar no type Params, e você terá uma ajudinha da IDE

recomendo que ao adicionar tipos de parâmetros de url na tipagem, coloque este sinal ? após o nome do propiedade. pois assim você saberá que este valor poderá vir vazio

1
  • 1
    Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 9/02/2023 às 19:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .