Pular para o conteúdo

Links

O componente Link permite que você personalize facilmente elementos de âncora com suas cores de tema e estilos de tipografia.

Links simples

O componente Link é construído sobre o componente Typography. Você pode aproveitar suas propriedades.

<Link href="#">Link</Link>
<Link href="#" color="inherit">
  {'color="inherit"'}
</Link>
<Link href="#" variant="body2">
  {'variant="body2"'}
</Link>

Quando você usa target="_blank" com Links, é recomendado sempre definir rel="noopener" ou rel="noreferrer" quando conectando a conteúdo de terceiros.

  • A propriedade color="primary", pelo fato de que o link precisa se destacar.
  • A propriedade variant="inherit", já que o link será na maioria das vezes usado como filho de um componente Typography.

Sublinhado

A propriedade underline pode ser usada para definir o comportamento sublinhado. O padrão é hover.

<Link href="#" underline="none">
  {'underline="none"'}
</Link>
<Link href="#" underline="hover">
  {'underline="hover"'}
</Link>
<Link href="#" underline="always">
  {'underline="always"'}
</Link>

Segurança

Quando você usa target="_blank" com Links, é recomendado sempre definir rel="noopener" ou rel="noreferrer" quando conectando a conteúdo de terceiros.

  • rel="noopener" impede que a nova página possa acessar a propriedade window.opener e garante que ela seja executada em um processo separado. Sem isso, a página de destino pode potencialmente redirecionar sua página para uma URL mal-intencionada.
  • rel="noreferrer" tem o mesmo efeito, mas também impede que o cabeçalho Referer seja enviado para a nova página. ⚠️ A remoção do cabeçalho referrer afetará a análise.

Biblioteca de roteamento de terceiros

Uma situação comum é executar a navegação apenas no lado do cliente, sem uma ida e volta HTTP ao servidor. O componente Link fornece uma propriedade para lidar com este caso: component.

Aqui está um exemplo de integração com react-router.

Acessibilidade

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#link)

<Link
  component="button"
  variant="body2"
  onClick={() => {
    console.info("I'm a button.");
  }}
>
  Button Link
</Link>