Hola, estoy usando React Router v6 y uso NavLink para navegar de un componente a otro. Quiero agregar una clase activa personalizada en NavLink, ¿cómo puedo lograrlo en el enrutador de reacción v6. Yo uso esto pero no funciona.
<NavLink className="px-3 py-2 bg-primary" to={"/"} activeClassName="btn-group-active" > Home </NavLink >Cómo lograr lo anterior con reaccionar router v6.
Obtuve mi respuesta de este enlace.
<NavLink className={({ isActive }) => isActive ? "btn-group-active" : "bg-primary"} />Consulte los documentos
Puedes lograr esto haciendo eso:
<NavLink to={customPath} className={({ isActive }) => (isActive ? "myCssClass" : "")} > <Home /> </NavLink>Si tiene más clases, las concatena así:
<NavLink to={customPath} className={({ isActive }) => (isActive ? "myActiveClass defaultClass defaultClassTwo" : "defaultClass")} > <Home /> </NavLink>