Estoy usando la nueva barra de navegación NEXTUI: https://nextui.org/docs/components/navbar
Quiero establecer la propiedad isActive en el enlace activo y no hay mucha ayuda para obtener de Google, así que espero que alguien aquí lo haya usado o sepa cómo hacerlo. Estoy usando Next.js
Una parte del código:
<Navbar.Content enableCursorHighlight activeColor="primary" hideIn="xs" variant="highlight-rounded" > {navigation.map((item, index) => ( <Navbar.Link key={index} href={item.link}> {item.title} </Navbar.Link> ))} </Navbar.Content> EDITAR: cuando agrego isActive en el bucle del map , afecta a todos. Quiero configurar isActive en el clic (enlace activo) uno a la vez. Si no hice un bucle en mis enlaces de navegación (que provienen del backend), podría establecer la propiedad IsActive en uno, pero luego es solo el que tiene isActive incluso si hago clic en otros enlaces.
Tienes que usar una condición específica en tu map para comprobar si estás en la ruta correcta.
Por ejemplo: puede usar next/router y compararlo con la propiedad de link del elemento.
const { asPath } = useRouter(); . . . //inside return body .... {navigation.map((item, index) => { if(asPath === item.link) return(<Navbar.Link isActive key={index} href={item.link}> {item.title} </Navbar.Link>); }); else return(<Navbar.Lin key={index} href=. {item.link}> {item.title} </Navbar.Link>); }) }