Création et Gestion des Liens Actifs
En développement web, il est courant de mettre en évidence les liens actifs en fonction de la page actuelle.
Avec Next.js, cela peut être réalisé en utilisant le hook usePathname(). Ce hook vérifie le chemin actuel dans l’application, ce qui permet de mettre en surbrillance dynamiquement la page correspondante à l’aide de la bibliothèque clsx.
Retour au projet
Pour utiliser le hook usePathname(), convertir nav-links.tsx en composant client. Commencer par ajouter la directive "use client" en haut du fichier.
Nous pouvons maintenant utiliser le hook usePathname et l'utiliser.
Enfin, utiliser la bibliothèque clsx pour appliquer des styles de manière conditionnelle. Définir la condition de sorte que si le pathname est égal à link.href, la couleur de fond passe à bg-neutral-600.
En pratique
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.08Création et Gestion des Liens Actifs
Glissez pour afficher le menu
En développement web, il est courant de mettre en évidence les liens actifs en fonction de la page actuelle.
Avec Next.js, cela peut être réalisé en utilisant le hook usePathname(). Ce hook vérifie le chemin actuel dans l’application, ce qui permet de mettre en surbrillance dynamiquement la page correspondante à l’aide de la bibliothèque clsx.
Retour au projet
Pour utiliser le hook usePathname(), convertir nav-links.tsx en composant client. Commencer par ajouter la directive "use client" en haut du fichier.
Nous pouvons maintenant utiliser le hook usePathname et l'utiliser.
Enfin, utiliser la bibliothèque clsx pour appliquer des styles de manière conditionnelle. Définir la condition de sorte que si le pathname est égal à link.href, la couleur de fond passe à bg-neutral-600.
En pratique
Merci pour vos commentaires !
