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() 调用父级 class 的构造函数，需要将父级 class 的属性正确传递给此组件。您将需要它来访问传递给组件的任何属性，包括 router.

布局的顶部 class 应如下所示。

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

  navigate() {
    ...
  }

  render() {
    ...
  }
}

Here are the docs on how classes work in ES6!

编辑 1：反应路由器

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

ReactJs this.props.router 未定义

ReactJs this.props.router undefined

javascript

reactjs

react-router

react-dom