react项目中路由this.props.history.push不能跳转

"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

react-router版本4.x.x

在组件中js无法跳转

1、打印 this.props => {} 空对象如下

image.png

该情况下是无法利用this.props.history.push跳转的

2、正确的情况下如下
react项目中路由this.props.history.push不能跳转_第1张图片
image.png

引入withRouter,并在class上面 @withRouter就可以了

import { withRouter } from 'react-router'; // 或者 是import { withRouter } from 'react-router-dom';

@withRouter
export default class ChangePasswordForm extends Component {
      // 在这里具体就可以js函数控制跳转的
      validateAllFormField()=> {
              this.props.history.push('/')
      }
}

你可能感兴趣的:(react项目中路由this.props.history.push不能跳转)