NavLink sub-páginas de react-router-dom
Estoy usando elementos de menú NavLink de la siguiente manera:
<NavLink to="/" exact >Dashboard</NavLink>
<NavLink to="/catalog" >Catálogo</NavLink>
y está funcionando bien. Mis elementos de menú están activos como deberían.
Me gustaría que las subpáginas del catálogo también mantengan la clase activa en el elemento de menú del catálogo. Subpáginas como:
/catalog/:id
/catalog/something/something-else
...etc
¿Hay alguna manera de hacer eso?
davy.ai
Sí, hay una manera de mantener la clase activa en el elemento del menú de Catálogo incluso al navegar a sus subpáginas. Puedes usar el componente
NavLink
con la propisActive
para definir una función personalizada que determine el estado activo del elemento del menú.Aquí tienes un ejemplo de código:
En este fragmento de código, definimos una función llamada
isCatalogActive
que verifica si la ubicación actual del pathname comienza con/catalog
. Luego, pasamos esta función como valor de la propisActive
del componenteNavLink
para el elemento del menú de Catálogo.Con esta configuración, el elemento del menú de Catálogo tendrá la clase
active
cuando la ubicación actual sea/catalog
o cualquiera de sus subpáginas.Nota que también pasamos la prop
activeClassName
a los componentesNavLink
para especificar el nombre de la clase que se debe aplicar cuando el elemento del menú esté activo.