Javascript React无法对未定义的属性路径进行反应

我正在构建一个高阶组件，以便在我的react应用程序中创建空闲超时功能。我有自动生成组件，我正在将其包含在index.js文件中。然而，我遇到了一个无法读取路径的问题。我做错了什么

以下是我的HOC组件：

import IdleTimer from "react-idle-timer";
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { Switch, Route } from 'react-router-dom'
import DefaultLayout from "../containers/DefaultLayout";


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

          this.state = {
              timeout:      1000*5,
              showModal:    false,
              userLoggedIn: false,
              isTimedOut:   false
          };

          this.idleTimer = null;
          this.onAction = this._onAction.bind(this);
          this.onActive = this._onActive.bind(this);
          this.onIdle = this._onIdle.bind(this);

      }

      _onAction(e){
          console.log('User did something', e);
          this.setState({isTimedOut: false})
      }

      _onActive(e){
          console.log('user is active', e);
          this.setState({isTimedOut: false})
      }

      _onIdle(e){
          console.log('user is idle', e);
          const isTimedOut = this.state.isTimedOut;
          if (isTimedOut){
              this.props.history.push('/')
          }else {
              this.setState({showModal: true});
              this.idleTimer.reset();
              this.setState({isTimedOut: true})
          }
      }

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

                    <div className="">
                        <Switch>
                            <Route
                               exact path={`${match.path}/sales-analysis/dashboard`}
                                render={(props) => <DefaultLayout {...props} /> }/>
                            />
                        </Switch>
                    </div>
            </WrappedComponent>
        )
    }

 }
}
    HOC.propTypes = {
        match: PropTypes.any.isRequired,
        history: PropTypes.func.isRequired
    };

从“react idle timer”导入IdleTimer；
从“React”导入React，{Component}
从“道具类型”导入道具类型；
从“react router dom”导入{交换机，路由}
从“./容器/DefaultLayout”导入DefaultLayout；
导出默认函数HOC（WrappedComponent）{
返回类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
超时时间：1000*5，
showModal：错，
userLoggedIn:false，
结果：错误
};
this.idleTimer=null；
this.onAction=this.\u onAction.bind（this）；
this.onActive=this.\u onActive.bind（this）；
this.onIdle=this.\u onIdle.bind（this）；
}
_行动（e）{
log（'User do something'，e）；
this.setState（{isTimedOut:false}）
}
_（e）{
console.log（'用户处于活动状态'，e）；
this.setState（{isTimedOut:false}）
}
_奥尼尔（e）{
console.log（'用户空闲'，e）；
const isTimedOut=this.state.isTimedOut；
如果（退出）{
this.props.history.push（“/”）
}否则{
this.setState（{showmodel:true}）；
this.idleTimer.reset（）；
this.setState（{isTimedOut:true}）
}
}
render（）{
const{match}=this.props；
返回(
{this.idleTimer=ref}}
元素={document}
onActive={this.onActive}
onIdle={this.onIdle}
onAction={this.onAction}
去盎司={250}
超时={this.state.timeout}/>
}/>
/>
)
}
}
}
HOC.propTypes={
匹配：需要PropTypes.any.isRequired，
历史记录：需要PropTypes.func.isRequired
};

下面是index.js文件，其中包含我要监视的路由

class AppEntry extends React.Component {
  componentDidMount() {
    window.addEventListener("appNotifyUpdate", this.appNotifyUpdate);
    window.addEventListener("appUpdate", this.appUpdate);
    window.addEventListener("offline", function(e) {
      store.dispatch(setOffline(true));
    });
    window.addEventListener("online", function(e) {
      store.dispatch(setOffline(false));
    });
  }

  componentWillUnmount() {
    window.removeEventListener("appNotifyUpdate", this.appNotifyUpdate);
    window.removeEventListener("appUpdate", this.appUpdate);
    window.removeEventListener("offline", function(e) {
      store.dispatch(setOffline(true));
    });
    window.removeEventListener("online", function(e) {
      store.dispatch(setOffline(false));
    });
  }

  appNotifyUpdate = e => {
    store.dispatch(setAppUpdateBar(true));
  };

  appUpdate = e => {
    store.dispatch(setAppUpdateBar(false));
  };

  render() {
    return (
      <Provider store={this.props.store}>
        <PersistGate loading={<div />} persistor={this.props.persistor}>
          <BrowserRouter>
            <div id="browserRouter">
              <Route exact path="/" component={LoginContainer} key="login" />
              <Route
                path="/change-password"
                component={LoginContainer}
                key="change-password"
              />
              <Route path="/logout" component={Logout} key="logout" />
              <DefaultLayout
                path="/sales-analysis/dashboard"
                component={HOC(DashboardContainer)}
              />
              <DefaultLayout
                path="/sales-analysis/active-clients"
                component={ActiveClientsContainer}
              />
              <DefaultLayout
                path="/sales-analysis/activity-reports"
                component={ActivityReportsContainer}
              />
              <DefaultLayout
                path="/sales-analysis/segments"
                component={SegmentsContainer}
              />
              <DefaultLayout path="/prospects" component={ProspectsContainer} />
              <DefaultLayout
                path="/preferences/general"
                component={PreferenceGeneral}
              />
              <DefaultLayout
                path="/preferences/account-manager"
                component={PreferenceAccountManager}
              />
              <DefaultLayout
                path="/preferences/flex-fields"
                component={PreferenceFlexFields}
              />
              <DefaultLayout
                path="/preferences/oem-manager"
                component={PreferenceOEMManager}
              />
              <DefaultLayout
                path="/preferences/users"
                component={PreferenceUsers}
              />
              <DefaultLayout
                path="/preferences/group-users"
                component={PreferenceGroupUsers}
              />
            </div>
          </BrowserRouter>
        </PersistGate>
      </Provider>
    );
  }
}
AppEntry = HOC(AppEntry);

类AppEntry扩展了React.Component{
componentDidMount（）{
addEventListener（“appNotifyUpdate”，this.appNotifyUpdate）；
window.addEventListener（“appUpdate”，this.appUpdate）；
window.addEventListener（“脱机”，函数（e）{
store.dispatch（setOffline（true））；
});
window.addEventListener（“在线”，函数（e）{
store.dispatch（setOffline（false））；
});
}
组件将卸载（）{
removeEventListener（“appNotifyUpdate”，this.appNotifyUpdate）；
removeEventListener（“appUpdate”，this.appUpdate）；
window.removeEventListener（“脱机”，函数（e）{
store.dispatch（setOffline（true））；
});
window.removeEventListener（“联机”，函数（e）{
store.dispatch（setOffline（false））；
});
}
appNotifyUpdate=e=>{
store.dispatch（setAppUpdateBar（true））；
};
appUpdate=e=>{
store.dispatch（setAppUpdateBar（false））；
};
render（）{
返回(
);
}
}
AppEntry=HOC（AppEntry）；

我得到的确切错误是

TypeError: Cannot read property 'path' of undefined
render
./src/components/AutoLogout.js:65:52
  62 | <div className="">
  63 |     <Switch>
  64 |         <Route
> 65 |            exact path={`${match.path}/sales-analysis/dashboard`}
     |            render={(props) => <DefaultLayout {...props} /> }/>
  67 |         />
  68 |     </Switch>

TypeError:无法读取未定义的属性“path”
提供
./src/components/AutoLogout.js:65:52
62 | 
63 |     
64 | 65 |精确路径={`${match.path}/sales analysis/dashboard`}
|渲染={（道具）=>}/>
67 |         />
68 |     

这是因为您没有将道具传递给您的HoC

尝试（例如）：

//导入
从'path/to/my/HOC'导入HOC；
//…代码
const MyHoc=HOC（仪表板容器）；
//主类
类AppEntry扩展了React.Component{
//…代码
//在“渲染”方法中，利用“渲染属性”
render（）{
返回(
//…代码
} />

Hi Mose，const MyHoc，当你在我的课堂之外说，你是指我的index.js文件还是指HOC文件？在导入HOC和路由的文件中，我应该仍然这样包装该组件吗？AppEntry=HOC（AppEntry）；你介意我和你聊一些后续问题吗？@jesus2kus ok！！

//Imports
import HOC from 'path/to/my/hoc';

//...code

const MyHoc = HOC(DashboardContainer);

//Main class
class AppEntry extends React.Component {

//...code

// In the render method take advantage of render prop
render() {
  return (
    //...code
    <Route exact path="/my-path" render={(props) => <MyHoc {...props} />} />