我正在尝试将我的项目从使用react-router的v3移植到现在称为react-router-dom的v4.现在问题出现在我有一个MenuBar组件,它完全独立于路由逻辑(正如你所期望的那样),因为无论当前路径是什么,它都会显示完全相同的链接.现在这与v3完美配合,但现在当我使用具有相同activeClassName属性的NavLink时,活动路由不会在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逻辑,你可以看到路由是嵌套的,但路由器本身包裹整个组件.
解决方法
根据您对@observer装饰器的使用情况,您似乎正在使用mobx-react.关于观察者的事情是它实现了shouldComponentUpdate来优化渲染性能.那个sCU调用将查看当前和下一个道具,如果没有区别,它将不会重新渲染.这是一个问题,因为默认情况下,React Router使用上下文传递数据并依赖重新呈现的元素来获取更新的值,但观察者的sCU无法检测上下文更改.
解决这个问题的方法是将location对象作为prop传递给由observer包装的组件.然后,当位置改变时,观察者的shouldComponentUpdate将检测差异并重新渲染.
您可以查看blocked updates guide以获取更多信息.
