Tengo un problema con mi menú desplegable que me tiene un poco perplejo. Tengo una aplicación web que consta de un componente de barra de navegación en la parte superior y un componente de página justo debajo. Por alguna razón, cuando estoy en la página de inicio, el menú desplegable para uno de los enlaces de navegación funciona bien y me permite desplazarme sobre los elementos de navegación, pero cuando estoy en la página de inicio de sesión, el menú desplegable desaparece tan pronto como me desplazo. de eso Cargo el contenido de mi barra de navegación dinámicamente en el siguiente componente:
NavItems.jsx:
import React, {useState} from 'react'; import Dropdown from './Dropdown'; import {Link} from 'react-router-dom'; function NavItems(props) { const items = props.items; const [click, setClick] = useState(false); const handleClick = () => setClick(!click); const [dropdown, setDropdown] = useState(false); const onMouseEnter = () => { if (window.innerWidth < 960) { setDropdown(false); } else { setDropdown(true); } }; const onMouseLeave = () => { if (window.innerWidth < 960) { setDropdown(false); } else { setDropdown(false); } }; return ( <div className='link-container' onMouseLeave={onMouseLeave}> <li className='nav-item'> {items.subNav ? ( <> <Link className={items.cName} to={items.path} onClick={() => setClick(false)} onMouseEnter={onMouseEnter} > {items.title} </Link> {dropdown && <Dropdown submenus={items.subNav} />} </> ) : ( <Link className={items.cName} to={items.path} onClick={() => setClick(false)} > {items.title} </Link> )} </li> </div> ); } export default NavItems;No entiendo por qué mi menú desplegable funciona en la página de inicio pero no en la página de inicio de sesión cuando la barra de navegación está separada de la página misma. ¿Alguien puede ayudarme a resolver esto?