React-Routerとのアクティブリンク?


91

React-Router(v4)を試していますが、Navから始めてLink'のいずれかを使用する際に問題が発生しますactiveLinkタグのいずれかをクリックすると、アクティブなものが機能し始めます。ただし、ルートLinkで読み込まれるコンポーネントであるため、アプリが起動したらすぐにHomeをアクティブにしたいです/。これを行う方法はありますか?

これが私の現在のコードです:

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

回答:


218

<Link>activeClassNameまたはactiveStyleプロパティはもうありません。react-router v4では、<NavLink>条件付きスタイリングを実行する場合に使用する必要があります。

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

私は家に正確なプロパティを追加しました。<NavLink>それがないと、ホームリンクは、他のページ/と一致するため、常にアクティブになると確信し/aboutています。


2
NavLinkを使用することで一見問題を回避できると思ったので、今日この答えを見落としました。これを説明する他の場所を見つけるのは難しいです。彼は正確に正しいので、人々はこの答えに賛成する必要があります。NavLinkを使用する必要があります。また!正確な= {true}も正確に正しいです。そうしないと、他のリンクをクリックしてもレンダリングされる最初のリンクが再レンダリングされず、ホームが常にアクティブになります。あと10回賛成できたらいいのにと思います。
wuno 2017

4
React with Reduxを使用している場合は、このgithub.com/ReactTraining/react-router/blob/master/packages/…
Petr Adam

1
ネストされたルートの場合はexactNavLinkも使用する必要があります。
Wiktor Czajkowski 2018年

1
そのリンクをありがとう、@ PetrAdam-なぜこれが機能しなかったのか疑問に思っていました!(解決策は、connect呼び出しをでラップすることですwithRouter)。
ブライアンバーンズ

1
reduxが再レンダリングをブロックするのを避けるためpure: falseに、connect()メソッドにオプションを提供できます。なし更新されているビューの詳細:https://github.com/reduxjs/react-redux/blob/master/docs/troubleshooting.md
Pateta
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.