Collegamento attivo con React-Router?


91

Sto provando React-Router (v4) e ho problemi ad avviare il Nav per avere uno dei Linkbe active. Se clicco su uno qualsiasi dei Linktag, le cose attive iniziano a funzionare. Tuttavia, vorrei che Home Linkfosse attivo non appena l'app si avvia poiché è il componente che viene caricato sul /percorso. C'è un modo per fare questo?

Ecco il mio codice attuale:

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>
)

Risposte:


218

<Link>non ha più le proprietà activeClassNameo activeStyle. In react-router v4 devi usare <NavLink>se vuoi fare uno stile condizionale:

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>
)

Ho aggiunto una proprietà esatta alla home <NavLink>, sono abbastanza sicuro che senza di essa, il link home sarebbe sempre attivo poiché /corrisponderebbe a /aboutqualsiasi altra pagina che hai.


2
Oggi ho trascurato questa risposta perché pensavo che l'utilizzo di NavLink evitasse il problema a prima vista. È difficile trovare altrove che spieghi questo. Le persone devono votare a favore di questa risposta perché ha esattamente ragione. devi usare NavLink. ANCHE! anche l'esatto = {true} è esattamente corretto. In caso contrario, il primo collegamento che viene visualizzato non verrà visualizzato nuovamente quando si fa clic su altri collegamenti, facendo sì che la casa sia sempre attiva. Vorrei poterti votare altre 10 volte.
wuno

4
Solo una breve nota, se stai usando React con Redux, devi seguire questo github.com/ReactTraining/react-router/blob/master/packages/…
Petr Adam

1
In caso di percorsi annidati, potrebbe essere necessario utilizzare anche exactper NavLink.
Wiktor Czajkowski

1
Grazie per quel collegamento, @PetrAdam - mi chiedevo perché non funzionasse! (la soluzione è concludere la connectchiamata con withRouter).
Brian Burns

1
Per evitare il redux che blocca un re-rendering puoi fornire l'opzione pure: falseal connect()metodo. Maggiori informazioni su una vista non in fase di aggiornamento: https://github.com/reduxjs/react-redux/blob/master/docs/troubleshooting.md
Pateta
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.