Entonces, esto es exactamente lo que estoy tratando de hacer...
Estoy enviando el nombre de la clase y la identificación usando accesorios. y al verificar la condición, se implementará el estilo particular.
(este código se usa para implementar la barra de navegación)
para que mi clase activa (pestaña de menú) solo se resalte.
pero, cuando usé esto, resaltará todas las pestañas de navegación al mismo tiempo.
export default function NavElements(props) { const history = useLocation(); // console.log(history); const [isActive, setIsActive] = useState(props.isActive); useEffect(() => { setIsActive(props.isActive); },[props.isActive]); function handleClick() { props.onClick(props.index); } return ( <Link to={`${props.to}`}> <div id={`${props.rectangle}`} onClick={handleClick} className={ isActive ? 'backgroundSelected' : ''}> <div className="buttons-style" id={`${props.myClassName}`}> <div className="text-align"> <div className="text-link">{props.Title}</div> </div> </div> </div> </Link> ) }También puede usar useLocation como definió también
export default function NavElements(props) { let location = useLocation(); // console.log(history); return ( <Link to={`${props.to}` className={`${location.pathname === props.to }? "active":""`}}> <div id={`${props.rectangle}`}> <div className="buttons-style" id={`${props.myClassName}`}> <div className="text-align"> <div className="text-link">{props.Title}</div> </div> </div> </div> </Link> ) } La lógica es cuando el nombre de la ruta es igual al punto final dirigido por cualquier <Link> , se activa.
Puede definir su propia clase en lugar de la clase
activesi lo desea
Estoy un poco confundido acerca de lo que estás tratando de hacer. Pero si desea resaltar el menú activo, ¿por qué no puede usar NavLink en lugar de Link ?. El NavLink tiene una propiedad isActive que devuelve verdadero si el menú está activo.