React Router v4 NavLink 活动路由

我正在尝试使用 v3 移植我的项目react-router到现在所谓的 v4react-router-dom。现在，当我有一个 MenuBar 组件时，问题就出现了，该组件与路由逻辑完全分开（如您所期望的），因为无论当前路径是什么，它都会显示完全相同的链接。现在这在 v3 中工作得很好，但是现在当我使用时NavLink，其中有相同的activeClassName属性时，活动路线不会在导航栏上更新，仅在刷新时更新。这看起来有点愚蠢，所以必须有办法解决这个问题。

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

上面是我的主要应用程序逻辑，正如您所看到的，路由是嵌套的，但路由器本身包围了整个组件。

我应该添加什么才能让它们再次工作？ （它们在页面刷新时可以正常工作）

根据您的使用情况@observer装饰器，看来您正在使用mobx-react。需要了解的事情observer是它实现了shouldComponentUpdate以优化渲染性能。那sCUcall 会查看当前和下一个 props，如果没有差异，则不会重新渲染。这是一个问题，因为默认情况下，React Router 使用上下文来传递数据并依赖元素重新渲染来获取更新的值，但是observer's sCU无法检测上下文变化。

解决这个问题的方法是通过location对象作为包装组件的道具observer。然后，当位置改变时，observer's shouldComponentUpdate将检测差异并重新渲染。

您可以看到阻止更新指南 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md了解更多信息。