我正在使用MobX @observer和@withRouter（react-router-v4）这样的包装页面组件

@withRouter
@inject('stores')
@observer
class Page extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <Header title={this.props.stores.UIStore.title} />
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/about" component={AboutPage} />
          <Route component={NotFound} />
        </Switch>
      </div>
    )
  }

Problem
当路线位置改变时，NavBar和Header组件总是使用相同的道具重新渲染（没有任何状态更新） . 在路线改变时，react-perf显示许多浪费的渲染（没有道具/状态更新） .

NavBar包括Link和一些MobX状态（只有@observer @inject的NavBar包装）
Headers 只是一个无状态组件 .

页面组件需要@withRouter导致@observer（MobX）中断react-router（https://github.com/mobxjs/mobx-react/issues/210）

如何防止NavBar和Header从路径位置更改重新渲染？仅在mobx状态更新时允许重新渲染 .

reactjs mobx react-router-v4 mobx-react react-router-dom