Actieve Links Maken en Beheren
In webontwikkeling is het gebruikelijk om actieve links te markeren op basis van de huidige pagina.
In Next.js kunnen we dit realiseren met de usePathname() hook. Deze hook controleert het huidige pad in de applicatie, waardoor we dynamische markering voor de bijbehorende pagina kunnen implementeren met de clsx-bibliotheek.
Terug naar het project
Om de usePathname() hook te gebruiken, converteer nav-links.tsx naar een Client Component. Begin met het toevoegen van de "use client"-directive bovenaan het bestand.
Nu kan de usePathname hook worden gebruikt en toegepast.
Gebruik tot slot de clsx-bibliotheek om stijlen conditioneel toe te passen. Stel de voorwaarde in dat wanneer het pathname gelijk is aan link.href, de achtergrondkleur wordt gewijzigd naar bg-neutral-600.
In de praktijk
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
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.08Actieve Links Maken en Beheren
Veeg om het menu te tonen
In webontwikkeling is het gebruikelijk om actieve links te markeren op basis van de huidige pagina.
In Next.js kunnen we dit realiseren met de usePathname() hook. Deze hook controleert het huidige pad in de applicatie, waardoor we dynamische markering voor de bijbehorende pagina kunnen implementeren met de clsx-bibliotheek.
Terug naar het project
Om de usePathname() hook te gebruiken, converteer nav-links.tsx naar een Client Component. Begin met het toevoegen van de "use client"-directive bovenaan het bestand.
Nu kan de usePathname hook worden gebruikt en toegepast.
Gebruik tot slot de clsx-bibliotheek om stijlen conditioneel toe te passen. Stel de voorwaarde in dat wanneer het pathname gelijk is aan link.href, de achtergrondkleur wordt gewijzigd naar bg-neutral-600.
In de praktijk
Bedankt voor je feedback!
