Question

我试图将我的项目移植到使用react-router的v3到现在称为react-router-dom的v4。现在问题出现在我有一个MenuBar组件，它完全独立于路由逻辑（正如你所期望的那样），因为无论当前路径是什么，它都会显示完全相同的链接。现在，这与v3完美配合，但现在当我使用具有相同NavLink属性的activeClassName时，活动路由不会在NavBar上更新，仅在刷新时更新。这似乎有点愚蠢，所以必须有办法解决这个问题。

＆＃13;

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

＆＃13;

以上是我的主要App逻辑，你可以看到路由是嵌套的，但路由器本身包裹着整个组件。

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

Answer 1

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

您可以通过将sCU对象作为prop传递给由location包装的组件来解决此问题。然后，当位置发生变化时，observer的{{1}}会检测到差异并重新渲染。

您可以查看blocked updates guide了解详情。

React Router v4 NavLink活动路由

1 个答案: