Aktive Verbindung mit React-Router?

90

Ich probiere React-Router (v4) aus und habe Probleme beim Starten der Navigation, um eines der Linkzu haben active. Wenn ich auf eines der LinkTags klicke, funktioniert das aktive Material. Ich möchte jedoch, dass Home Linkaktiv ist, sobald die App gestartet wird, da dies die Komponente ist, die auf der /Route geladen wird. Gibt es eine Möglichkeit, dies zu tun?

Hier ist mein aktueller Code:

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>
)
javascript reactjs ecmascript-6 react-router Saad
quelle

Antworten:

216

<Link>hat nicht mehr die activeClassNameoder activeStyleEigenschaften. In React-Router v4 müssen Sie Folgendes verwenden, <NavLink>wenn Sie ein bedingtes Styling durchführen möchten:

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

Ich habe dem Home eine genaue Eigenschaft hinzugefügt. <NavLink>Ich bin mir ziemlich sicher, dass der Home-Link ohne diese Eigenschaft immer aktiv /wäre, da sie mit /aboutallen anderen Seiten übereinstimmt, die Sie haben.

worc
quelle
2
Ich habe diese Antwort heute übersehen, weil ich dachte, die Verwendung von NavLink würde das Problem auf den ersten Blick vermeiden. Es ist schwer, irgendwo anders zu finden, was dies erklärt. Die Leute müssen diese Antwort positiv bewerten, weil er genau richtig ist. Sie müssen NavLink verwenden. EBENFALLS! das genaue = {true} ist auch genau richtig. Andernfalls wird der erste Link, der gerendert wird, nicht erneut gerendert, wenn Sie auf andere Links klicken, wodurch home immer aktiv ist. Ich wünschte, ich könnte dich noch 10 Mal positiv bewerten.
Wuno
4
Nur eine kurze Anmerkung, wenn Sie React with Redux verwenden, müssen Sie diesem github.com/ReactTraining/react-router/blob/master/packages/…
Petr Adam
1
Im Fall von verschachtelten Routen, müssen Sie verwenden exactfür das NavLinkauch.
Wiktor Czajkowski
1
Vielen Dank für diesen Link, @PetrAdam - habe mich gefragt, warum das nicht funktioniert hat! (Die Lösung besteht darin, den connectAnruf mit zu beenden withRouter).
Brian Burns
1
Um zu vermeiden, dass Redux ein erneutes Rendern blockiert, können Sie pure: falseder connect()Methode die Option bereitstellen . Weitere Informationen zu einer Ansicht, die nicht aktualisiert wird: https://github.com/reduxjs/react-redux/blob/master/docs/troubleshoot.md
Pateta