Como adicionar link externo com React Router

Neste artigo você vai aprender a como incluir link externo com React Router, ou seja, para um domínio que não é do seu projeto

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

O React Router é, sem dúvida, uma das bibliotecas mais populares e robustas para gerenciamento de rotas em aplicações React.

Ele permite aos desenvolvedores criar Single Page Applications (SPA) com facilidade, manipulando diferentes rotas e views sem recarregar a página.

Porém, enquanto o React Router é perfeito para lidar com rotas internas, você pode se perguntar: “Como posso lidar com links externos?”.

Neste artigo, você aprenderá como adicionar links externos usando o React Router.

O básico do React Router

Antes de mergulharmos diretamente em links externos, é essencial compreender os fundamentos do React Router.

Em sua essência, esta biblioteca permite definir “rotas” que mapeiam para componentes React.

Quando a URL muda, o componente associado àquela rota é renderizado, criando a ilusão de navegação entre páginas.

A questão dos links externos

Embora o React Router seja excelente para gerenciar rotas internas, não há um componente integrado para lidar com links externos.

Por quê? Simplesmente porque um link externo não requer nenhuma lógica especial de roteamento.

É apenas um link regular que redireciona o usuário para outro domínio.

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

Utilizando o componente Link

O React Router fornece um componente Link que é normalmente usado para navegação interna.

No entanto, ele não foi projetado para lidar com URLs externas.

Exemplo de uso do Link para rota interna:

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

function Navegacao() {
  return (
    <div>
      <Link to="/pagina-interna">Ir para Página Interna</Link>
    </div>
  );
}

A solução para links externos: a tag <a>

A forma mais simples e direta de adicionar um link externo em sua aplicação React é usando a boa e velha tag de ancoragem <a>.

Embora possa parecer básico, é a abordagem mais eficaz e direta.

Exemplo de uso da tag <a> para link externo:

function Navegacao() {
  return (
    <div>
      <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Visite o Google</a>
    </div>
  );
}

No exemplo acima, usamos target="_blank" para abrir o link em uma nova janela ou guia. Adicionalmente, rel="noopener noreferrer" é uma medida de segurança recomendada ao usar target="_blank.

Unindo React Router e Links Externos

Em muitos casos, pode ser desejável ter uma aparência consistente entre links internos e externos.

Isso pode ser alcançado usando estilos e estruturando seus componentes de maneira otimizada.

Exemplo de Componente de Link Universal:

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

function LinkUniversal({ to, externo, children }) {
  if (externo) {
    return <a href={to} target="_blank" rel="noopener noreferrer">{children}</a>;
  }
  return <Link to={to}>{children}</Link>;
}

// Uso
function Navegacao() {
  return (
    <div>
      <LinkUniversal to="/pagina-interna">Página Interna</LinkUniversal>
      <LinkUniversal to="https://www.google.com" externo>Google</LinkUniversal>
    </div>
  );
}

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

Conclusão

Chegamos ao fim do artigo sobre link externo com React Router!

O React Router simplifica a navegação entre as “páginas” de uma Single Page Application, tornando a experiência do usuário fluida e rápida.

Ao lidar com links externos, não há necessidade de complicar: uma simples tag <a> é suficiente.

No entanto, para manter a consistência no design e estrutura, você pode criar componentes personalizados que lidam tanto com links internos quanto externos.

Independentemente da abordagem escolhida, o React e o React Router oferecem as ferramentas e a flexibilidade necessárias para criar uma experiência de navegação eficiente e agradável para seus usuários.

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

Link ou tag <a>? Quando usar cada um

Essa é a dúvida que mais aparece, então bora deixar reto

O componente Link do React Router serve pra navegação INTERNA, dentro da sua aplicação

Ele não recarrega a página, só troca o componente que aparece na tela, mantendo aquela experiência de SPA fluida

Já a tag <a> faz uma navegação de verdade, o navegador sai do seu app e vai pro endereço que você mandou

Regra simples pra não errar:

Rota do seu próprio projeto (tipo /sobre, /contato) usa o Link

Endereço de fora (outro domínio, tipo o Google) usa a tag <a>

Se você tentar jogar uma URL externa dentro do Link, o React Router trata como rota interna e monta um caminho relativo esquisito, aí o link simplesmente não leva pra onde você quer

Por isso pra link externo a tag <a> é o caminho certo, sem gambiarra

Abrindo um link externo em um botão (via código)

Às vezes você não quer um link visível, quer que o usuário clique num botão e caia no endereço externo

Pra isso dá pra usar o window.open dentro de uma função

function Navegacao() { function abrirExterno() { window.open(‘https://www.google.com’, ‘_blank’, ‘noopener,noreferrer’); }

return ( <button onClick={abrirExterno}>Visitar o Google</button> ); }

Repara que passamos ‘noopener,noreferrer’ também aqui, mesma proteção que a gente usa na tag <a>

Se a ideia é redirecionar na MESMA aba, é só trocar por window.location.href = ‘https://www.google.com’

Detalhe importante: pra link externo você não precisa (e nem deve) usar o useNavigate do React Router

O useNavigate é pra rotas internas do seu app, ele não foi feito pra mandar o usuário pra fora do domínio

Perguntas frequentes

Dá pra usar o componente Link para link externo? O Link não foi feito pra isso, ele monta uma rota interna da sua aplicação e acaba gerando um caminho relativo, então o link externo não funciona como esperado. Pra sair do seu domínio, use a tag <a>

Como abrir um link externo em uma nova aba no React? Basta usar a tag <a> com target="_blank", assim o endereço abre em uma nova aba ou janela. Junto dela, adicione rel="noopener noreferrer" por segurança

Para que serve o rel="noopener noreferrer"? É uma medida de segurança recomendada quando você usa target="_blank". Ela impede que a página aberta tenha acesso à sua página de origem pelo objeto window, fechando uma brecha conhecida

Qual a diferença entre o Link e a tag <a>? O Link do React Router navega entre rotas internas sem recarregar a página, mantendo o comportamento de SPA. A tag <a> faz uma navegação real do navegador, ideal pra endereços de outros domínios

Como criar um componente que serve para link interno e externo? Você pode montar um componente que recebe uma prop indicando se o destino é externo. Sendo externo, ele renderiza a tag <a>; sendo interno, renderiza o Link. É o padrão de Link universal mostrado neste artigo