javascript - React Router v4 NavLink アクティブ ルート

Question

react-routerプロジェクトを v3から v4に移植しようとしていますreact-router-dom。ここで、現在のパスが何であれ、まったく同じリンクを表示するため、(ご想像のとおり) ルーティング ロジックから完全に分離されている MenuBar コンポーネントがある場合に問題が発生します。これは v3 ですべてうまく機能しましNavLinkたが、同じactiveClassNameプロパティを持つ を使用している場合、アクティブなルートは NavBar で更新されず、更新時にのみ更新されます。それは少しばかげているように思えるので、これを回避する方法があるはずです。

export default @inject('ui') @observer class App extends Component {
  render() {
    return (
      <Router>
        <div className={ styles.wrapper }>
          <Sidebar />
          <main className={ `${styles.main} ${!this.props.ui.menuOpen && styles.closed}` }>
            <Route exact path="/" component={ HomePage } />
            <Route path="/signup" component={ SignUpPage } />
            <Route path="/login" component={ LoginPage } />
            <Route path="/about" component={ AboutPage } />
          </main>
          <footer className="site-footer"></footer>
        </div>
      </Router>
    );
  }
}

上記はメインのアプリ ロジックであり、ご覧のとおり、ルートはネストされていますが、ルーター自体がコンポーネント全体をラップしています。

それらを再び機能させるには何を追加すればよいですか? (ページの更新時に正しく機能します)