react-router v4 的版本中 如何实现跳转功能?

前端之家收集整理的这篇文章主要介绍了react-router v4 的版本中 如何实现跳转功能?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题

当我们使用react-router v3@H_301_4@的时候,我们想跳转路由,我们一般这样处理

  1. 我们从react-router@H_301_4@导出browserHistory@H_301_4@。
  2. 我们使用browserHistory.push()@H_301_4@等等方法操作路由跳转

类似下面这样

import browserHistory from 'react-router';

export function addProduct(props) {
  return dispatch =>
    axios.post(`xxx`,props,config)
      .then(response => {
        browserHistory.push('/cart'); //这里
      });
}

but!! 问题来了,在react-router v4@H_301_4@中,不提供browserHistory@H_301_4@等的导出~~

那怎么办?我如何控制路由跳转呢???

解决方法

使用 withRouter

withRouter@H_301_4@高阶组件,提供了history@H_301_4@让你使用~

import React from "react";
import {withRouter} from "react-router-dom";

class MyComponent extends React.Component {
  ...
  myFunction() {
    this.props.history.push("/some/Path");
  }
  ...
}
export default withRouter(MyComponent);

这是官方推荐做法哦。但是这种方法用起来有点难受,比如我们想在redux@H_301_4@里面使用路由的时候,我们只能在组件把history@H_301_4@传递过去。。

就像问题章节的代码那种场景使用,我们就必须从组件中传一个history@H_301_4@参数过去。。。

原文链接:https://www.f2er.com/react/301740.html

猜你在找的React相关文章