Criando e Gerenciando Links Ativos
No desenvolvimento web, uma prática comum é destacar os links ativos com base na página atual.
No Next.js, isso pode ser feito utilizando o hook usePathname(). Esse hook verifica o caminho atual no aplicativo, permitindo implementar a marcação dinâmica da página correspondente com a biblioteca clsx.
De volta ao projeto
Para utilizar o hook usePathname(), converta o arquivo nav-links.tsx em um Client Component. Comece adicionando a diretiva "use client" no topo do arquivo.
Agora, é possível utilizar o hook usePathname e aplicá-lo.
Por fim, utilize a biblioteca clsx para aplicar estilos condicionalmente. Defina a condição para que, se o pathname for igual a link.href, a cor de fundo seja alterada para bg-neutral-600.
Na Prática
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
How does the clsx library work for conditional styling?
Can you explain how usePathname determines the active link?
What should I do if the active link highlighting doesn't work as expected?
Awesome!
Completion rate improved to 2.08Criando e Gerenciando Links Ativos
Deslize para mostrar o menu
No desenvolvimento web, uma prática comum é destacar os links ativos com base na página atual.
No Next.js, isso pode ser feito utilizando o hook usePathname(). Esse hook verifica o caminho atual no aplicativo, permitindo implementar a marcação dinâmica da página correspondente com a biblioteca clsx.
De volta ao projeto
Para utilizar o hook usePathname(), converta o arquivo nav-links.tsx em um Client Component. Comece adicionando a diretiva "use client" no topo do arquivo.
Agora, é possível utilizar o hook usePathname e aplicá-lo.
Por fim, utilize a biblioteca clsx para aplicar estilos condicionalmente. Defina a condição para que, se o pathname for igual a link.href, a cor de fundo seja alterada para bg-neutral-600.
Na Prática
Obrigado pelo seu feedback!
