Почему 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

Как я могу сделать это, чтобы я мог разместитьмой PrivateRoute как родитель, когда я знаю, что все дети Route s также будут частными, не нарушая приставку?

ОБНОВЛЕНИЕ: Я изменил MonitorLive и MonitorsPage для включения withRouter() в экспортную выписку.Content уже было это.Это изменение не решает проблему.Пример оператора экспорта:

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

ОБНОВЛЕНИЕ 2: В дополнение к 5 обстоятельствам, устраняющим проблему, упомянутую выше, есть следующее:

Если удалить одну из строкс текстом или <span>span</span> из Content:

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