为什么 PrivateRoute 会阻止我的 Redux 连接组件在存储状态更新时重新渲染？

Question

在我的<Content> 组件中，我有：

<PrivateRoute path="/monitors" component={MonitorsPage}/>

在<MonitorsPage>内：

<Route path="/monitors/:device_id/live" component={MonitorLive}/>

<MonitorsLive> 使用 Redux connect() 订阅存储状态更改。

这是我的测试<PrivateRoute>：

import React from "react";
import { Route } from "react-router-dom";

function delay(t, v) {
  return new Promise(function(resolve) {
    setTimeout(resolve.bind(null, v), t)
  });
}

class PrivateRoute extends React.Component {
  state = {
    isLoaded: false,
  };

  authenticate() {
    delay(1000).then(()=>{
      console.log('AUTHENTICATED');
      this.setState({isLoaded: true})
    })
  }

  componentDidMount() {
    this.authenticate()
  }

  render() {
    const {component: Component, ...rest} = this.props;
    const { isLoaded } = this.state;

    return (
      <Route {...rest} render={
        props => (!isLoaded ? <div>loading...</div> : <Component {...props} />)
      }
      />
    )}}

export default PrivateRoute

如果我导航到/monitors/:device_id/live 路由并刷新浏览器，组件加载和安装正常，但在这种情况下无法重新渲染存储状态更改。它在许多其他条件下都能正常工作，包括：

1. 从/monitors 路由导航到问题路由（而不是浏览器硬重新加载）或
2. <Content> 和 <MonitorsPage> 都使用 <Route> 而不是 <PrivateRoute> 或
3. <Content> 和 <MonitorsPage> 都使用 <PrivateRoute> 而不是 <Route> 或
4. <Content> 使用 <Route> 和 <MonitorsPage> 使用 <PrivateRoute> 或
5. this.setState({isLoaded: true}) 在 PrivateRoute 中没有前面的 delay(1000) 执行

当我知道所有孩子 Routes 也将是私有的，而不会破坏 redux 时，我该如何做到这一点，以便我可以将我的 PrivateRoute 作为父母？

更新：我已修改 MonitorLive 和 MonitorsPage 以在导出语句中包含 withRouter()。 Content 已经有了。此更改不能解决问题。示例导出语句：

export default withRouter(connect(mapStateToProps,mapDispatchToProps)(MonitorLive))

更新 2： 除了消除上述问题的 5 种情况外，还有以下情况：

如果我从Content 中删除带有“文本”或<span>span</span> 的行：

class Content extends Component {

  render() {
    return (
      <div>
        <div>
          text
          <span>span</span>
        </div>
        <div>
          <button onClick={this.props.getMonitorLiveValues}>Update State</button>
          <Switch>
            <PrivateRoute
              path="/monitors"
              component={MonitorsPage}
            />
          </Switch>
        </div>
      </div>
    )}}

更新 3： 演示问题：https://vvmk3qorq7.codesandbox.io/monitors/ARMS-NVM-P5/live

https://codesandbox.io/s/vvmk3qorq7

Answer 1

通过将 react-dom 从 16.3.2 升级到 16.4.0 解决了该问题