React Router v4 NavLink 活动路由 [英] React Router v4 NavLink active route

问题描述

我正在尝试将我的项目从使用 react-router 的 v3 移植到现在称为 react-router-dom 的 v4.现在，当我有一个 MenuBar 组件时会出现问题，该组件与路由逻辑完全分离(如您所料)，因为无论当前路径是什么，它都会显示完全相同的链接.现在，在 v3 中一切正常，但是现在当我使用具有相同 activeClassName 属性的 NavLink 时，活动路由不会在 NavBar 上更新，只会在刷新.这似乎有点愚蠢，所以必须有办法解决这个问题.

export default @inject('ui') @observer class App extends Component {使成为() {返回 (<路由器><div className={styles.wrapper }><侧边栏/><main className={ `${styles.main} ${!this.props.ui.menuOpen &&样式.关闭}` }><路由精确路径="/" component={ HomePage }/><Route path="/signup" component={ SignUpPage }/><Route path="/login" component={ LoginPage }/><Route path="/about" component={ AboutPage }/></main><footer className="site-footer"></footer>

</路由器>);}}

以上是我的主要应用逻辑，如您所见，路由是嵌套的，但路由器本身环绕整个组件.

我应该添加什么才能使它们再次工作?(它们在页面刷新时正常工作)

解决方案

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

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

你可以看到阻止更新指南 了解更多信息.

I'm trying to port my project from using v3 of react-router to v4 of what is now called react-router-dom. Now the problems arise when I have a MenuBar component, which is completely separate from the routing logic (as you'd expect), because it will show the exact same links whatever the current path may be. Now that worked all nicely with v3, but now when I'm using NavLink, which has the same activeClassName property, the active route does not update on the NavBar, only on refresh. That seems a bit dumb, so there must be a way around this.

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

The above is my main App logic and as you can see the routes are nested, but the Router itself wraps around the whole component.

What should I add to make them work again? (They do work properly on page refresh)

解决方案

Based on your usage of the @observer decorator, it appears that you are using mobx-react. The thing to understand about observer is that it implements shouldComponentUpdate to optimize rendering performance. That sCU call will look at the current and next props, and if there is no difference, it will not re-render. This is a problem because by default, React Router uses the context to pass data and relies on elements re-rendering to get the updated values, but observer's sCU has no way to detect context changes.

The way that you can get around this is by passing the location object as a prop to the component that is wrapped by observer. Then, when the location changes, observer's shouldComponentUpdate will detect the difference and re-render.

You can see the blocked updates guide for more information.

这篇关于React Router v4 NavLink 活动路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！