Como fazer redirecionamento externo com React Router

Neste artigo você vai aprender a como fazer redirecionamento externo com React Router, utilizando uma abordagem simples!

Fala programador(a), beleza? Bora aprender mais sobre React Router!

O React Router é uma biblioteca muito popular para gerenciamento de rotas em aplicações React.

O redirecionamento externo é uma funcionalidade importante em muitas aplicações web e pode ser implementado facilmente com o React Router.

Neste artigo, vamos mostrar como fazer redirecionamento externo com React Router.

Usando o componente Redirect

O componente Redirect do React Router pode ser usado para redirecionar o usuário para uma URL externa.

Para isso, basta definir a propriedade “to” com a URL desejada. Aqui está um exemplo:

import { Redirect } from 'react-router-dom';

function MeuComponente() {
  return <Redirect to="https://www.google.com" />;
}

Neste exemplo, estamos usando o componente Redirect para redirecionar o usuário para a página inicial do Google.

Quando o componente for renderizado, o usuário será automaticamente redirecionado para a URL especificada.

Usando a função history.push()

Outra maneira de fazer redirecionamento externo com React Router é usando a função history.push().

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

Essa função pode ser chamada dentro de um componente para navegar para uma URL externa. Aqui está um exemplo:

import { useHistory } from 'react-router-dom';

function MeuComponente() {
  const history = useHistory();
  function handleClick() {
    history.push("https://www.google.com");
  }
  return <button onClick={handleClick}>Ir para o Google</button>;
}

Neste exemplo, estamos usando a função useHistory() para obter o objeto history do React Router.

Em seguida, definimos uma função handleClick() que é chamada quando o usuário clica em um botão.

Dentro dessa função, chamamos a função history.push() para navegar para a URL externa especificada.

Usando o método window.location.assign()

Finalmente, outra maneira de fazer redirecionamento externo em uma aplicação React é usando o método window.location.assign().

Esse método pode ser usado para navegar para uma URL externa diretamente a partir do objeto window do navegador.

Aqui está um exemplo:

function MeuComponente() {
  function handleClick() {
    window.location.assign("https://www.google.com");
  }
  return <button onClick={handleClick}>Ir para o Google</button>;
}

Neste exemplo, estamos definindo uma função handleClick() que é chamada quando o usuário clica em um botão.

Dentro dessa função, estamos chamando o método window.location.assign() para navegar para a URL externa especificada.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Em conclusão, o React Router oferece diversas maneiras de fazer redirecionamento externo em aplicações React.

Utilizando o componente Redirect, a função history.push() ou o método window.location.assign(), é possível redirecionar o usuário para uma URL externa de forma simples e eficiente.

É importante lembrar que, ao fazer redirecionamento externo, é preciso garantir que o usuário esteja ciente de que está saindo do site e navegando para uma outra página externa.

Além disso, é preciso considerar questões de segurança, como a possibilidade de abrir páginas maliciosas ou falsas.

Com essas informações, é possível implementar redirecionamento externo em suas aplicações React com segurança e eficiência, garantindo uma melhor experiência do usuário.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Rota interna ou saída do site: qual é a diferença?

Antes de sair copiando código, se liga nessa separação, porque é ela que explica quase todo redirecionamento que "não funciona"

Um roteador de cliente cuida do que é SEU: as telas da sua própria aplicação

Ele troca o que aparece na tela sem recarregar a página, e é justamente por isso que ele é rápido

Agora, sair do seu domínio e ir pra outro site é outro tipo de coisa: aí quem manda é o navegador, não o roteador

É tipo a diferença entre trocar de cômodo dentro de casa e sair pela porta da rua

Dentro de casa, tu anda

Pra sair, tu abre a porta 😀

Regrinha rápida pra escolher:

Destino é um caminho da sua própria aplicação? Usa a navegação do roteador

Destino é um endereço completo de outro site? Aí é navegação do navegador mesmo

Guarda essa regra, ela vale pra qualquer versão da lib e pra qualquer projeto React

E se for só um link? Usa uma tag <a>:

Muita gente monta botão com JavaScript quando o caso era só um link de verdade

Parece detalhe, mas não é

Com uma âncora normal o usuário ganha tudo de graça: abrir em nova aba com o clique do meio, copiar o endereço, botão direito, leitor de tela anunciando que é um link, e o rastreador entendendo pra onde aquilo aponta

Com botão + JS, nada disso existe

[bloco de código]

Se for abrir em outra aba, vale acrescentar o rel de segurança junto do target, pra página aberta não ter referência à sua janela

Então quando usar código?

Quando a saída NÃO é um link clicável: depois de um formulário enviado, depois de um pagamento aprovado, depois de uma condição que só o seu código conhece

Aí sim faz sentido mandar o navegador embora por código

Pra tudo que o usuário clica pra ir, âncora resolve melhor 🙂

Por que meu redirecionamento externo não funciona?

Se tu chegou aqui porque copiou um trecho da internet e nada aconteceu, roda essa checklist antes de xingar a biblioteca haha

1. Faltou o protocolo no endereço

Endereço sem http ou https na frente costuma ser lido como caminho relativo, ou seja: o navegador gruda aquilo no seu próprio domínio e tu acaba num 404 do seu site

Caso o console mostre uma URL estranha com seu domínio na frente, é esse o problema

2. A navegação não partiu de um clique do usuário

Navegador desconfia de coisa que sai sozinha, sem interação

Se teu redirecionamento roda automático assim que a tela monta, teste também a versão disparada por clique pra isolar a causa

3. A versão do pacote no teu projeto não é a mesma do exemplo

Aqui é o erro mais comum de todos: tu copia um trecho, o nome do que se importa não existe no teu projeto e a aplicação quebra na importação

Abre o package.json e confere qual versão do React Router tá instalada ali ANTES de copiar qualquer coisa

O nome do que tu importa muda conforme a versão, então o exemplo certo pra um projeto pode não ser o certo pro teu

Tome cuidado com isso, já me ferrei uma vez copiando trecho de tutorial sem olhar a versão…

Cuidado com redirecionamento que vem da URL:

Esse aqui é o ponto que quase nenhum tutorial fala, e é o que mais dá dor de cabeça em produção

Sabe aquele padrão de mandar o destino como parâmetro na própria URL, tipo um parâmetro de retorno depois do login?

Se teu código pega esse valor e redireciona pra ele sem checar nada, tu acabou de dar um megafone pra qualquer um

O atacante monta um endereço que começa com o TEU domínio (que a vítima confia) e termina caindo num site falso

A vítima olha o começo do link, vê teu site, e clica

Como se proteger, na prática:

Nunca redirecione direto pro valor que veio da URL, do formulário ou de qualquer coisa que o usuário consegue editar

Trabalhe com lista de destinos permitidos: se o valor não estiver na lista, manda pra uma rota interna padrão e pronto

Se o destino externo for fixo, deixa fixo no código, nem passa por parâmetro

E quando o usuário for mesmo pra fora, avisa que ele tá saindo do site, com um texto claro ou uma tela de saída

É pouco trabalho e evita muito problema, beleza?