前端之家收集整理的这篇文章主要介绍了
react-router v4 的版本中 如何实现跳转功能?,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
问题
@H_
404_2@当我们使用
react-router v3
的时候,我们想
跳转路由,我们一般这样处理
- 我们从
react-router
导出browserHistory
。
- 我们使用
browserHistory.push()
等等方法操作路由跳转。
@H_
404_2@类似下面这样
import browserHistory from 'react-router';
export function addProduct(props) {
return dispatch =>
axios.post(`xxx`,props,config)
.then(response => {
browserHistory.push('/cart'); //这里
});
}
@H_
404_2@but!! 问题来了,在
react-router v4
中,不提供
browserHistory
等的导出~~
@H_
404_2@那怎么办?我如何控制路由
跳转呢???
使用 withRouter
@H_
404_2@
withRouter
高阶组件,提供了
history
让你使用~
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);
@H_
404_2@这是官方推荐做法哦。但是这种
方法用起来有点难受,比如我们想在
redux
里面使用路由的时候,我们只能在组件把
history
传递过去。。
@H_
404_2@就像问题章节的
代码那种场景使用,我们就必须从组件中传一个
history
参数过去。。。