我正在尝试将我的项目从使用 v3 移植react-router
到现在称为 v4 的react-router-dom
. 现在,当我有一个与路由逻辑完全分离的 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>
);
}
}
以上是我的主要应用程序逻辑,您可以看到路由是嵌套的,但路由器本身包裹着整个组件。
我应该添加什么以使它们再次工作?(它们在页面刷新时确实可以正常工作)