ReactJs this.props.router 未定义

你好，我正在学习 React js，我遇到了一个问题。当我尝试使用 React Router 更改回主页时，出现以下错误：

未捕获的类型错误：无法读取未定义的属性“push”

这是我的代码，您可以看到我正在调用导航函数：

我的 client.js 与路由器：

如果我更换this.props.router.push('/'); with this.props.history.push('/');效果很好。 可能是什么问题呢？

您缺少一个构造函数方法来调用super(). super()调用父类的构造函数，并且需要将父类的属性正确传递给该组件。您需要它来访问传递给组件的任何属性，包括router.

布局类的顶部应该如下所示。

export default class Layout extends React.Component {
  constructor(props) {
    super(props)
  }

  navigate() {
    ...
  }

  render() {
    ...
  }
}

以下是有关 ES6 中类如何工作的文档！

编辑 1：React 路由器

您还需要使用新的withRouter通过进行导航时this.props.router。您可以通过将组件作为参数传递并导出来完成此操作。这withRouter函数只是将您的组件包装在另一个组件中，该组件将 router prop 传递给您的组件。我应该指出，还有其他方法可以进行编程路由（单例、上下文等），但是当使用this.props.router.push你需要使用withRouter.

import { withRouter } from 'react-router' 
class Layout extends React.Component {
  constructor(props) {
    super(props)
  }

  navigate() {
    ...
  }

  render() {
    ...
  }
}

export default withRouter(Layout)

与路由器一起使用