javascript - ReactJs this.props.router 未定义

Question

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

Uncaught TypeError: Cannot read property 'push' of undefined

这是我的代码，如您所见，我正在调用导航函数:

我的带有路由器的 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() {
    ...
  }
}

Here are the docs on how classes work in ES6!

编辑 1:React 路由器

在通过 this.props.router 进行导航时，您还需要使用新的 withRouter。您可以通过将您的组件作为参数传递并将其导出来执行此操作。 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)

Using withRouter