Desarrollé una barra de navegación simple que tiene un JSON como datos para construir dinámicamente sus enlaces. Visualmente, necesito conservar la barra de navegación con el enlace/ruta activo actual. Probé dos formas:

Primera implementación:

Componente del menú:

 const ToggleMenuHandler = (e: React.MouseEvent<HTMLElement>) => { clearMenu(); activateItem(e.currentTarget); e.stopPropagation(); } const MenuItems = MenuContent.map(item => { return ( <NavigationItem key={uuidv4()} {...item} clickHandler={ToggleMenuHandler} /> ); });

Componente de elemento de navegación:

 <ListItem onClick={(event: React.MouseEvent<HTMLElement>) => props.clickHandler(event)}> <Link href={sub.href}>{sub.name}</Link> </ListItem>

Estoy seguro de que la función ToggleMenuHandler funciona correctamente después de depurarla. activateItem es la función responsable de diseñar un elemento como activo. Si elimino el componente <Link> del elemento de navegación, funciona bien. Así que pensé que mi componente de menú se estaba volviendo a montar, lo que me llevó a la segunda implementación.

Segunda implementación

Este se basó en el principio de que mi menú se estaba volviendo a montar. Lo que hice fue vincular la propiedad href de <Link> a la identificación de NavigationItem . De esa manera, al usar router.pathname pude encontrar el elemento que debería activarse, y el componente del menú de código cambió a:

 const router = useRouter(); useEffect(() => { activateItem(document.querySelector(`#${router.pathname}`)) }, []);

... y también ToggleMenuHandler del componente del elemento de menú. De esa forma, cuando la página fuera redactada obtendría su ruta y, con ella, encontraría el elemento de la lista para activarlo visualmente. También depuré el gancho useEffect y funcionaba correctamente. Sin embargo, no se activó cuando se hizo clic en el enlace.

Pregunta: ¿Qué se activa exactamente cuando se hace clic en un componente de enlace NextJS y, dado el contexto de esta pregunta, cómo puedo manejar ese evento?