Aktive Verbindung mit React-Router?

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

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