我正在尝试将我的项目从使用 v3 的 react-router
移植到现在称为 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 逻辑,如您所见,路由是嵌套的,但 Router 本身包裹了整个组件。
我应该添加什么才能使它们再次工作? (它们在页面刷新时可以正常工作)
最佳答案
根据您对 @observer
装饰器的使用,您似乎正在使用 mobx-react
。关于 observer
需要了解的是它实现了 shouldComponentUpdate
来优化渲染性能。 sCU
调用将查看当前和下一个 Prop ,如果没有区别,则不会重新渲染。这是一个问题,因为默认情况下,React Router 使用上下文传递数据并依赖元素重新渲染来获取更新值,但是 observer
的 sCU
没有检测上下文变化的方法。
解决此问题的方法是将 location
对象作为 prop 传递给由 observer
包装的组件。然后,当位置发生变化时,observer
的 shouldComponentUpdate
将检测到差异并重新渲染。
你可以看到 blocked updates guide获取更多信息。
关于javascript - React Router v4 NavLink 主动路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42752430/