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.
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.