为什么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})在没有前述执行delay(1000)中PrivateRoute

如何做到这一点，以便当我知道所有子级Route也将是私有的而不会破坏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可以解决此问题