Lien vers le routeur React ; activeClassName ne fonctionne pas

Question

J'ai un composant de navigation qui rend chaque lien de navigation. Le retour de ce composant ressemble à ceci :

     return (
        <li key={`nav-list-${el.title}-${index}`}>
          <Link to={{pathname: '/c/' + el.urlkey}}
                activeClassName={s.active}>{el.title}</Link>
          {subNav}
        </li>
      );

La classe active n'est définie que lors d'un rafraîchissement de la page. Lorsque vous cliquez sur les liens, l'indicateur actif reste sur le lien initial.

Je n'utilise pas Redux, donc cela ne semble pas être lié à ce problème : activeClassName ne fonctionne pas dans le sideMenu lorsque l'on clique sur le lien

Mon parcours ressemble à ceci :

      <Route path="/c/:category(/:title)" component={CategoryView} name="category" />

en utilisant React-Router 2.8.1 et browserHistory

Answer 1

Il est difficile de déboguer sans voir le code complet mais les problèmes avec React Router activeClassName peuvent souvent être résolus par l'un ou l'autre :

• S'assurer que vous en avez un IndexLink :

  <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li> <li><Link to="/" activeClassName="active">About</Link></li> <li><Link to="/" activeClassName="active">Contact</Link></li>

• Ou en utilisant le onlyActiveOnIndex sur tous les Links :

  <li><Link to="/" activeClassName="active" onlyActiveOnIndex>Home</Link></li> <li><Link to="/" activeClassName="active" onlyActiveOnIndex>About</Link></li> <li><Link to="/" activeClassName="active" onlyActiveOnIndex>Contact</Link></li>

Voici une démonstration fonctionnelle d'une deuxième solution : http://codepen.io/PiotrBerebecki/pen/qaKqRW

Answer 2

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

de ReactTraining l'a fait pour moi

Answer 3

Il existe deux solutions pour cela :

• Vous pouvez passer à la dernière version stable v3.0.0 (libéré aujourd'hui) où ce problème est corrigé. (voir https://github.com/ReactTraining/react-router/issues/3286#issuecomment-220861601 )
• Appliquez le correctif pour v2.8.1 de cette réponse : https://stackoverflow.com/a/40126703

Edit : vous n'utilisez pas Redux donc la deuxième solution ne fonctionnera pas.

Answer 4

Je n'ai pas voulu faire de mise à niveau pour l'instant car elle causait plus de problèmes qu'elle n'en résolvait. Et je n'utilisais pas Redux, donc le truc de la connexion ne s'appliquait pas. J'ai essayé de rendre à la fois pur et non pur (en utilisant le décorateur pure-render) sans résultat.

J'ai donc décidé d'écrire la gestion des liens manuellement. C'est super verbeux je sais mais ça marche !

J'ai ajouté le contexte du routeur :

static contextTypes = {
   router: React.PropTypes.object
};

Le rendu revient :

return (
   <li key={`nav-${el.title}`} className={`${isActiveClass}`}>
     <a onClick={this.state.LinkClick} data-item={urlkey}>{el.title}</a>
   </li>
);

Le gestionnaire de clic ressemble à ceci :

LinkClick(e){
   e.preventDefault();
   const elem = e.currentTarget;
   const item = elem.dataset.item;
   this.context.router.push('/c/'+item);
   this.setState({
     activeLink: item
   });
 }

Enfin, j'ai défini la classe dans le rendu :

  const activeLink = this.state.activeLink;
  let isActiveClass = '';
  let navLinks = map(availableCategories, (el, index) => {
  const urlkey = el.urlkey;

  // Check the active item on page render
  const isActive = this.context.router.isActive('/c/' + urlkey);

  if(activeLink === urlkey || isActive){
    isActiveClass = s.active;
  } else {
    isActiveClass = '';
  }

Answer 5

J'avais ce problème dans react-router-dom v4.3. et mon application entière était déjà enveloppée en utilisant withRouter. J'utilise également react-redux. J'ai remarqué que la classe était ajoutée au lien correct.

const mapStateToProps = (state) => {
return {
    router: state.router,
    location: state.route.location
 }
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)

et mes liens de navigation ressemblaient à ceci

 <NavLink
        exact
        to="/logs"
        className="menu-item"
        activeClassName="selected"
        >
        <i className="st-icon-log-reports" /> logs 
 </NavLink>