Creación y Gestión de Enlaces Activos
En el desarrollo web, una práctica común es resaltar los enlaces activos según la página actual.
En Next.js, esto se puede lograr utilizando el hook usePathname(). Este hook verifica la ruta actual en la aplicación, lo que nos permite implementar el resaltado dinámico para la página correspondiente con la biblioteca clsx.
Volver al proyecto
Para utilizar el hook usePathname(), convierte nav-links.tsx en un Componente Cliente. Comienza agregando la directiva "use client" en la parte superior del archivo.
Ahora, se puede utilizar el hook usePathname y emplearlo.
Por último, utilizar la biblioteca clsx para aplicar estilos de forma condicional. Establecer la condición de modo que, si el pathname es igual a link.href, el color de fondo cambie a bg-neutral-600.
En la práctica
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
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.08Creación y Gestión de Enlaces Activos
Desliza para mostrar el menú
En el desarrollo web, una práctica común es resaltar los enlaces activos según la página actual.
En Next.js, esto se puede lograr utilizando el hook usePathname(). Este hook verifica la ruta actual en la aplicación, lo que nos permite implementar el resaltado dinámico para la página correspondiente con la biblioteca clsx.
Volver al proyecto
Para utilizar el hook usePathname(), convierte nav-links.tsx en un Componente Cliente. Comienza agregando la directiva "use client" en la parte superior del archivo.
Ahora, se puede utilizar el hook usePathname y emplearlo.
Por último, utilizar la biblioteca clsx para aplicar estilos de forma condicional. Establecer la condición de modo que, si el pathname es igual a link.href, el color de fondo cambie a bg-neutral-600.
En la práctica
¡Gracias por tus comentarios!
