react-router，prop `history` 未定义

Question

在我的 React 应用程序中，我使用的是 react-router-dom，在触发功能后的其中一个组件中，我想路由到主页。但我收到错误

The prop `history` is marked as required in `GameElements`, but its value is `undefined`.
    in GameElements (created by Connect(GameElements))

当然还有通话后 Uncaught TypeError: Cannot read property 'push' of undefined

这是我的index.js

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <Route component={App} />
    </Provider>
  </BrowserRouter>,
  document.getElementById("root")
);

从主页我得到了这样的组件

<Button color="blue" as={Link} to="/GameInit">
  START GAME
</Button>

现在从 GameInit 我想像这样回到主页

  cancel = () => {
    const { history, cancelGame } = this.props;
    cancelGame();
    history.push("/HomePage");
  };

GameElements.propTypes = {
  cancelGame: PropTypes.func.isRequired,
  history: PropTypes.shape({
    push: PropTypes.func.isRequired
  }).isRequired,
};

取消游戏正常运行，其减速器按应有的方式操纵状态

Answer 1

wrap you GameElements 是 withRouter hoc，将其包含在您的文件中

import { withRouter } from 'react-router'

现在在底部，导出组件的地方执行此操作。

export default withRouter(Connect(GameElements));

您可以在 docs 中阅读更多内容。

react-router，prop `history` 未定义

react-router, The prop `history` is undefined

browser-history

reactjs

react-router

react-proptypes

react-router-v4