ActiveClassName on lien Nav ne fonctionne pas - réagir

Question

Essayer de changer le style du lien de navigation dans la barre de navigation lorsqu'il est cliqué, j'ai compris d'une recherche sur Google que je devrais utiliser "activeClassName". J'ai essayé de l'utiliser et cela ne fonctionne pas. Qu'est-ce que je fais mal?

Le code du menu:

      Bloom

          principal
          principal
          principal
          principal

            principal

Le style:

   .active{
 color:red;
}

J'essaie de garder mon code aussi simple que possible donc si vous avez une meilleure solution, j'aimerais entendre parler.

Answer 1

Vous semblez le confondre avec l'élément NavLink de react router.

Votre code semble utiliser l'élément Nav.Link de react-bootstrap.

Vous devriez utiliser la propriété activeKey sur l'élément parent Nav pour indiquer celui qui est actif.

  principal
  principal
  principal
  principal

    principal

Cela ajoutera automatiquement une classe active au lien actif.