web-dev-qa-db-fra.com

Lien actif avec React-Router?

J'essaie React-Router (v4) et j'ai des problèmes pour démarrer l'un des navigateurs avec l'un des Link soit active. Si je clique sur l'une des balises Link, le travail actif commence à fonctionner. Cependant, j'aimerais que Home Link soit actif dès le démarrage de l'application, car c'est le composant qui se charge sur la route /. Est-ce qu'il y a un moyen de faire ça?

Voici mon code actuel:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */}
        <Link activeClassName='is-active' to='/about'>About</Link>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)
javascriptreactjsecmascript-6react-router
53
saadq

_<Link>_ n'a plus les propriétés activeClassName ou activeStyle. Dans react-router v4, vous devez utiliser <NavLink> si vous souhaitez appliquer un style conditionnel:

_const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact={true} activeClassName='is-active' to='/'>Home</NavLink>
        <NavLink activeClassName='is-active' to='/about'>About</NavLink>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)
_

J'ai ajouté une propriété exacte à la maison _<NavLink>_, je suis à peu près certaine que, sans elle, le lien de maison serait toujours actif puisque _/_ correspondrait à _/about_ et à toutes les autres pages que vous avez.

122
worc