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逻辑，你可以看到路由是嵌套的，但路由器本身包裹整个组件。

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

Answer 1

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

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

您可以查看阻止的更新指南以获取更多信息。