javascript - ReactJs this.props.router 未定义

Question

您好，我正在学习 React js，但遇到了一个问题。当我尝试使用反应路由器更改回主页时，出现以下错误：

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

这是我的代码，如您所见，我正在调用导航功能：

我的带有路由器的 client.js：

如果我this.props.router.push('/');用它代替this.props.history.push('/');它工作正常。可能是什么问题呢？

Answer 1

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

你的布局类的顶部应该是这样的。

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

  navigate() {
    ...
  }

  render() {
    ...
  }
}

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

编辑 1：反应路由器

withRouter通过 进行导航时，您还需要使用新的this.props.router。您可以通过将组件作为参数传递并导出它来做到这一点。该withRouter函数只是将您的组件包装在另一个组件中，该组件将路由器道具向下传递给您的组件。我应该指出，还有其他方法可以进行编程路由（单例、上下文等），但是在使用时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)

使用 withRouter