Root Navlink siempre obtiene la clase activa React Router Dom

Bienvenido a nuestra página, en este lugar encontrarás la solucíon a lo que estabas buscando.

Solución:

tienes que usar isActive= para agregar una verificación adicional para asegurarse de que el enlace esté activo.

documento

Trabajando jsFiddle. (el violín no es creado por mí)

El código que necesita agregar es el siguiente

Ejemplo en jsfiddle

Home

Cambio en tu código

 Home 

verifique la propiedad isActive y “checkActive” es una función.

const checkActive = (match, location) => 
    //some additional logic to verify you are in the home URI
    if(!location) return false;
    const pathname = location;
    console.log(pathname);
    return pathname === "/";

Otra configuración que puedes usar es “exacto” pero no es posible demostrarlo en un jsFiddle. Creo que el código sería como

 Home 

Espero que esto ayude. Y déjame saber si necesitas más información.

He encontrado que agregando exact antes de la primera activeClassName funciona también Entonces, por ejemplo, su configuración puede ser:

export const NavigationBar = () => (
  

    
Home 
    
    ....remaining NavLinks
  
)

Puedes usar exact palabra clave para la clase activa como

Home

generará así

Home

y si obtienes otra página, entonces será así

Home

Puntuaciones y reseñas

---

---

Utiliza Nuestro Buscador