React-router v4 使用 history 控制路由跳转
原文地址: https://github.com/brickspert/blog/issues/3102 (如果你觉得对你有帮助,可以去github上点个star哦。)
github上会更新,这里不更新
问题
当我们使用react-router v3
的时候,我们想跳转路径,我们一般这样处理
- 我们从
react-router
导出browserHistory
。 - 我们使用
browserHistory.push()
等等方法操作路由跳转。
类似下面这样
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
中,不提供browserHistory
等的导出~~
那怎么办?我如何控制路由跳转呢???
解决方法
1. 使用 withRouter
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);//这里很重要,注意
这是官方推荐做法哦。但是这种方法用起来有点难受,比如我们想在redux
里面使用路由的时候,我们只能在组件把history
传递过去。。
就像问题章节的代码那种场景使用,我们就必须从组件中传一个history
参数过去。。。
2. 使用 Context
react-router v4
在 Router
组件中通过Contex
暴露了一个router
对象~
在子组件中使用Context
,我们可以获得router
对象,如下面例子~
当然,这种方法慎用~尽量不用。因为react不推荐使用contex
哦。在未来版本中有可能被抛弃哦。
3. hack
其实分析问题所在,就是v3
中把我们传递给Router
组件的history
又暴露出来,让我们调用了~~
而react-router v4
的组件BrowserRouter
自己创建了history
,
并且不暴露出来,不让我们引用了。尴尬~
我们可以不使用推荐的BrowserRouter
,依旧使用Router
组件。我们自己创建history
,其他地方调用自己创建的history
。看代码~
- 我们自己创建一个
history
// src/history.js
import createHistory from 'history/createBrowserHistory';
export default createHistory();
- 我们使用
Router
组件
// src/index.js
import { Router, Link, Route } from 'react-router-dom'; import history from './history'; ReactDOM.render( <Provider store={store}> <Router history={history}> ... </Router> </Provider>, document.getElementById('root'), );
- 其他地方我们就可以这样用了
import history from './history'; export function addProduct(props) { return dispatch => axios.post(`xxx`, props, config) .then(response => { history.push('/cart'); //这里 }); }
4. 我非要用BrowserRouter
确实,react-router v4
推荐使用BrowserRouter
组件,而在第三个解决方案中,我们抛弃了这个组件,又回退使用了Router
组件。
怎么办。 你去看看BrowserRouter
的源码57,我觉得你就豁然开朗了。
源码非常简单,没什么东西。我们完全自己写一个BrowserRouter
组件,然后替换第三种解决方法中的Router
组件。嘿嘿。
讲到这里也结束了,我自己目前在使用第三种方法,虽然官方推荐第一种,我觉得用着比较麻烦唉。~