Estoy tratando de crear una barra lateral de navegación animada. Para ello tengo 2 estados para el enlace de los artículos. Hay un estado activo y un estado flotante. El estado activo se activa al hacer clic y el desplazamiento se activa cuando se desplaza el enlace, el problema principal al que me enfrento es que estoy usando un enrutador hash para vincular a los componentes en la página. Esto dificulta la implementación de una verificación simple como if(pathame === item.link .

 import { FC, useEffect, useRef, useState } from 'react' import { HashLink as Link } from 'react-router-hash-link' import { SidebarItemProps } from '../../models/SidebarItem' type SidebarLinkProps = { item: SidebarItemProps } const Submenu: FC<SidebarLinkProps> = ({ item }) => { const [active, setActive] = useState(false) const [hover, setHover] = useState(false) const link = useRef(null) useEffect(() => { if (document.activeElement === link.current) { setActive(true) } else { setActive(false) } }, []) return ( <Link to={item.path} smooth ref={link} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={() => setActive(true)} className={ 'sidebar-link ' + (active || hover ? 'scale-up-center active' : 'scale-down-center') } > <span className="label">{item.title}</span> </Link> ) } export default Submenu

este es mi componente actualmente. He intentado usar referencias, pero dado que hay varios elementos que se procesan aquí document.activeElement y link.current se mantienen true cuando hago clic en un elemento diferente.