Javascript React-TypeError:无法读取属性'；推动'；未定义、已导出的默认withRouter的

我有一个页面组件

SimulationReport

，单击

Reports

页面组件中的按钮后，我想重定向到该组件。这是带有

路由器的
应用程序
组件：

function App() {
  return (
    <React.Fragment>
      <Router>
        <NavigationBar />
        <Sidebar />
        <Switch>
          <Route exact path="/" component={Ratings} />
          <Route path="/LeagueSettings" component={LeagueSettings} />
          <Route path="/Fixtures" component={Fixtures} />
          <Route path="/Reports" component={Reports} />
          <Route path="/SimulationReport" component={SimulationReport} />
        </Switch>
      </Router>
    </React.Fragment>
  );
}

在文件的末尾，我有以下内容：

export default withRouter(Reports);

单击按钮后，我收到以下错误：

TypeError: Cannot read property 'push' of undefined

我不确定我需要做什么来重定向这个？或者我应该换一种方式来做？
似乎没有从组件中的
标记传递您的道具
历史记录。
可以通过执行以下操作将道具传递给管线渲染组件：

<Route
 path='/SimulationReport'
 render={(props) => <SimulationReport {...props} history={yourHistoryObjectForTheRouter} />}
/>

3°完成后，前往你的
App/index.js
文件，在那里你有你的
主标签。如果您已经完成了我前面所述的所有操作，那么在
App/index.js
中，您将添加一个新的导入：

import history from "./history";

这是您的新自定义历史对象

在这里，您可以选择两种解决问题的方法

==第一个解决方案

4°在同一文件中向下滚动，直到找到
标记，然后将其更新到下一部分：

<Router>
   <NavigationBar />
    <Sidebar />
    <Switch>
      <Route exact path="/" component={Ratings} />
      <Route path="/LeagueSettings" component={LeagueSettings} />
      <Route path="/Fixtures" component={Fixtures} />
      <Route path="/Reports" component={Reports} />
      <Route
          path='/SimulationReport'
          render={(props) => <SimulationReport {...props} history= 
              {history} />}
      />
    </Switch>
</Router>

<Router history={history}> //Here's the change
   <NavigationBar />
    <Sidebar />
    <Switch>
      <Route exact path="/" component={Ratings} />
      <Route path="/LeagueSettings" component={LeagueSettings} />
      <Route path="/Fixtures" component={Fixtures} />
      <Route path="/Reports" component={Reports} />
      <Route path="/SimulationReport" component={SimulationReport} />
    </Switch>
</Router>

这样做：

const handleSimView = index => e => {
    console.log("index: " + index);
    loadSimulationResult(simulationIds[index]);
    history.push("/SimulationReport"); //Change is here, removed "props."
  };

在此之后，您的代码应该可以工作。这个解决方案可以在任何地方实现它，因为您只需要导入历史对象并使用它

我会等你的消息，看看它是否管用。如果还有什么事情发生，你可以问我。
谢谢@Alan Maldonado，在这种情况下。。。您的计算机历史对象是什么？我还没有接触过这些概念，所以仍然要掌握这些概念。yourHistoryObjectForTheRouter是一个自定义的历史对象，您可以使用它来推送应用程序中的位置，而无需刷新应用程序。在您的情况下，您试图将应用程序的当前视图推送到“/simulationreport”，但该视图目前无法工作，因为您需要一个自定义历史对象来完成此操作。让我用你需要的东西更新我的答案。@Clattenburgcakey更新了我的答案！希望有帮助，如果你还需要什么，尽管问我！没关系，我知道发生了什么。在你的
App/index.js
中，将每个
的路径更新为小写，并添加prop
exact
，例如：
。之后，转到使用
历史记录的文件。按
并将路径更改为精确匹配。所以它看起来像是
history.push（“/simulationreport”）
。如果它不起作用，请再联系我。
<Router history={history}> //Here's the change
   <NavigationBar />
    <Sidebar />
    <Switch>
      <Route exact path="/" component={Ratings} />
      <Route path="/LeagueSettings" component={LeagueSettings} />
      <Route path="/Fixtures" component={Fixtures} />
      <Route path="/Reports" component={Reports} />
      <Route path="/SimulationReport" component={SimulationReport} />
    </Switch>
</Router>

const handleSimView = index => e => {
    console.log("index: " + index);
    loadSimulationResult(simulationIds[index]);
    props.history.push("/SimulationReport");
  };

const handleSimView = index => e => {
    console.log("index: " + index);
    loadSimulationResult(simulationIds[index]);
    history.push("/SimulationReport"); //Change is here, removed "props."
  };