我的第二个高阶组件未渲染

Question

我在我的应用程序中建立了超时功能。我正在从index.js文件传递路由，并将其包装在HOC中，第一个路由按预期运行，idleTimeout功能正常运行，但是，第二个MyProspects并未渲染，即使我正在处理其道具。谁能知道为什么会这样吗？

这是我的AutoLogout.js文件代码：

import IdleTimer from "react-idle-timer";
import React, { Component } from 'react'
// import PropTypes from 'prop-types';
import { Switch, Route} from 'react-router-dom'
import {IdleTimeOutModal} from "../IdleTimeOutModal";
import {MyDashboard, MyProspects} from "../index";
// import { useHistory } from "react-router-dom";
// import { userLogout } from "reducers/AuthReducer";

export default function HOC (WrappedComponent) {
 return class extends Component{
      constructor(props) {
          super(props);

          this.state = {
              timeout:      60000 * 5, //5 Minutest for now
              showModal:    false,
              userLoggedIn: false,
              isTimedOut:   false,
              remaining: null,
              elapse: null,
              isIdle: false,
              logout: false
          };

          this.onAction = this._onAction.bind(this);
          this.onActive = this._onActive.bind(this);
          this.onIdle = this._onIdle.bind(this);
          this._onActive = this._onActive.bind(this);
          // this.handleClose = this.handleClose.bind(this);
          // this.handleLogout = this.handleLogout.bind(this);
      }

      componentDidMount() {
          this.setState({
              remaining: this.idleTimer.getRemainingTime(),
              lastActive: this.idleTimer.getLastActiveTime(),
              elapsed: this.idleTimer.getElapsedTime()
          })


      }

     // handleClose() {
     //     this.setState({showModal: false})
     // }
     //
     // handleLogout() {
     //     this.setState({showModal: false});
     //     this.props.userHistory.push('/')
     // }



    render() {
        //const { match } = this.props;
        return (
            <div>
                <IdleTimer
                    ref={ref => {this.idleTimer = ref}}
                    element={document}
                    onActive={this.onActive}
                    onIdle={this.onIdle}
                    onAction={this.onAction}
                    debounce={250}
                    timeout={this.state.timeout} />

                    <WrappedComponent>
                            <Route
                                path={"/sales-analysis/dashboard"}
                                render={props => <MyDashboard {...props} />} />
                            <Route
                                path={"/prospects"}
                                render={props => <MyProspects {...props} />} />
                        <IdleTimeOutModal
                            showModal={this.state.showModal}
                            handleClose={this.handleClose}
                            handleLogout={this.handleLogout}
                        />
                    </WrappedComponent>
            </div>
        )
    }  _onAction(e) {
         console.log('user did something', e);
     }

     _onActive(e) {
         console.log('user is active', e);
         console.log('time remaining', this.idleTimer.getRemainingTime());
     }

     _onIdle(e) {
        const idle = this.setState({isIdle: true});
         console.log('elapseTime', this.idleTimer.getElapsedTime());
         console.log('userIsIdle', idle);
         console.log('userIsIdle', idle);
         // console.log('last active', this.idleTimer.getLastActiveTime())
        window.location = '/logout';
     }

 }
}

我的组件以这种方式包装在提供程序存储下的index.js文件中。

 <DefaultLayout
                path="/sales-analysis/dashboard"
                component={HOC(DashboardContainer)}
              />
<DefaultLayout path="/prospects"
                component={HOC(ProspectsContainer)} />

并以此方式导出

export const MyDashboard = HOC(DashboardContainer);
export const MyProspects = HOC(ProspectsContainer);