react-router v4 使用 history 控制路由跳转
问题当我们使用react-router v3的时候,我们想跳转路由,我们一般这样处理我们从react-router导出browserHistory。? import browserHistory from ‘react-router‘; export function addProduct(props) { return dispatch => axios.post(`xxx`,props,config) .then(response => { browserHistory.push(‘/cart‘); //这里 }); }
问题来了,在react-router v4中,不提供browserHistory等的导出~~那怎么办?我如何控制路由跳转呢??? 解决方法
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参数过去。。。
react-router v4 在 Router 组件中通过Contex暴露了一个router对象~ 在子组件中使用Context,我们可以获得router对象,如下面例子~ import React from "react"; import PropTypes from "prop-types"; class MyComponent extends React.Component { static contextTypes = { router: PropTypes.object } constructor(props,context) { super(props,context); } ... myFunction() { this.context.router.history.push("/some/Path"); } ... }
当然,这种方法慎用~尽量不用。因为react不推荐使用contex哦。在未来版本中有可能被抛弃哦。
其实分析问题所在,就是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`,config) .then(response => { history.push(‘/cart‘); //这里 }); } react-router v4推荐使用BrowserRouter组件,而在第三个解决方案中,我们抛弃了这个组件,又回退使用了Router组件。 我目前也没有更好的办法了 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |