React Router v4 NavLink 主动路由

Question

我正在尝试将我的项目从使用 react-router 的 v3 移植到现在称为 react-router-dom 的 v4。现在，当我有一个 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>
    );
  }
}

以上是我的主要 App 逻辑，正如您所见，路由是嵌套的，但 Router 本身包裹了整个组件。

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

Answer 1

根据您对 @observer 装饰器的使用情况，您似乎正在使用 mobx-react。关于 observer 需要了解的是它实现了 shouldComponentUpdate 以优化渲染性能。 sCU 调用将查看当前和下一个道具，如果没有区别，则不会重新渲染。这是一个问题，因为默认情况下，React Router 使用上下文传递数据并依赖元素重新渲染来获取更新值，但是 observer 的 sCU 无法检测到上下文更改。

解决此问题的方法是将 location 对象作为 prop 传递给由 observer 包装的组件。然后，当位置发生变化时，observer 的 shouldComponentUpdate 将检测差异并重新渲染。

您可以查看blocked updates guide了解更多信息。

React Router v4 NavLink 主动路由

React Router v4 NavLink active route

javascript

reactjs

react-router

react-router-v4