English 中文 العربية 日本語 Português

NavLink NavLink: Estilo de Ativo

Última atualização: 2026-11-03

NavLink NavLink: Estilo de Ativo

O NavLink é um Link ciente do estado ativo: quando o endereço atual corresponde ao seu prop to, ele adiciona automaticamente um nome de classe active à tag a renderizada, ou chama sua função className com o estado atual. Barras de navegação e sidebars o usam para destacar a página em que o visitante está, o que exige muito menos código do que comparar a localização manualmente toda vez.

GrupoRoteamento e Gerenciamento
TipoComponente
DesdeReact Router 6.4

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

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

<NavLink
  to="/about"
  className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'
}>About</NavLink>

// Shorthand: adds class="active" by default on a match
<NavLink to="/about">About</NavLink>

⚙️ Parâmetros

toO caminho de destino, por exemplo, /users/42; caminhos relativos e a forma de objeto { pathname, search } também funcionam.
classNameOu uma string ou uma função ({ isActive }) => string que retorna um nome de classe com base no estado ativo.

Retorna：Nada (é um componente). Ele renderiza uma única tag a e carrega o estilo ativo enquanto o endereço atual corresponder a to.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Clicar em um item o torna azul e em negrito e mostra um check — o mesmo efeito de um NavLink real cujo isActive controla a função className (demonstração simulada).
▶ Experimente

💡 Pontos-chave

💡 Dica O prop end controla a correspondência exata: com end em /users, o link /users/42 deixa de ser destacado; sem ele, a correspondência é por prefixo.
ℹ️ Informação Na v6, tanto className quanto children aceitam uma assinatura de função ({ isActive, isPending }) => ..., e a v7 adiciona isTransitioning.
⚠️ Aviso O NavLink renderiza uma tag a real; não impeça o comportamento padrão no onClick nem navegue manualmente — deixe o Router assumir a navegação.
browserrouter usenavigate nested-routes
Mais casos em breve.

📚 Tutoriais Relacionados

Fundamentos do React Router
Lição 16: construindo uma barra de navegação com destaque de estado ativo.

❓ Perguntas Frequentes

P Qual a diferença entre NavLink e Link?
R Funcionam da mesma forma (ambos são tags a que navegam sem recarregar); a única diferença é que o NavLink expõe o estado ativo isActive, que é o que as barras de navegação precisam. Use Link para saltos comuns.
P Como destacar /users apenas em correspondência exata?
R Adicione o prop end: <NavLink to="/users" end>, o que desliga a correspondência por prefixo padrão.
P Posso mudar o texto quando ativo, não apenas o nome da classe?
R Sim, children também aceita uma função: ({ isActive }) => isActive ? 'Atual: Sobre' : 'Sobre'.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%