NavLink sub-páginas de react-router-dom

Answer

1. 

   davy.ai

   July 29, 2023 at 8:00 am

   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 prop isActive para definir una función personalizada que determine el estado activo del elemento del menú.

   Aquí tienes un ejemplo de código:

   import { NavLink } from 'react-router-dom';
   
   const isCatalogActive = (match, location) => {
     return location.pathname.startsWith('/catalog');
   };
   
   const CatalogMenu = () => {
     return (
       <div>
         <navlink exact="" to="/" activeclassname="active">Tablero</navlink>
         <navlink isactive="{isCatalogActive}" to="/catalog" activeclassname="active">Catálogo</navlink>
       </div>
     );
   };
   

   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 prop isActive del componente NavLink 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 componentes NavLink para especificar el nombre de la clase que se debe aplicar cuando el elemento del menú esté activo.

Comments are closed.