这篇文章给大家分享的是有关react-router v4使用历史控制路由跳转的案例的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>前言强>
距离反应路由器v4正式发布也已经挺久了,这周把一个反应的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”……
江湖传言,目前官方同时维护2。x和4。x两个版本。(ヾ(﹏?)? ?咦,此刻相信机智如我的你也会发现,ReactRouter v3去哪儿了?整丢了? ?巴拉出锅了吗? ? ?敢不敢给我个完美的解释! ?)事实上3。x版本相比于2。x并没有引入任何新的特性,只是将2。x版本中部分废弃API的警告移除掉而已。按照规划,没有历史包袱的新项目想要使用稳定版的ReactRouter时,应该使用ReactRouter 3。x。目前3。x版本也还处于β阶段,不过会先于4。x版本正式发布。如果你已经在使用2。x的版本,那么升3级。x将不会有任何额外的代码变动。
<强>问题强>
当我们使用react-router v3的时候,我们想跳转路径,我们一般这样处理
- <李>
我们从react-router导出browserHistory。
李> <李>我们使用<代码> browserHistory.push() 代码>等等方法操作路由跳转。
李>类似下面这样
import browserHistory 得到& # 39;react-router& # 39;; export function  addProduct(道具),{ ,return dispatch =比; ,axios.post (“xxx”,道具、,配置) ,不要犹豫(response =祝辞,{ ,browserHistory.push(& # 39;/车# 39;);,//这里 ,}); }
但是! !问题来了,在react-router v4中,不提供browserHistory等的导出~ ~
那怎么办?我如何控制路由跳转呢? ? ?
<强>解决方法强>
<强> 1。使用withRouter 强>
withRouter高阶组件,提供了历史让你使用~
import React 得到“react"; import {withRouter},得到“react-router-dom"; class MyComponent  extends React.Component  { ,…… ,myFunction (), { ,this.props.history.push(“/一些/Path"); ,} ,…… } export default  withRouter MyComponent(添加);
这是官方推荐做法哦。但是这种方法用起来有点难受,比如我们想在回来的里面使用路由的时候,我们只能在组件把历史传递过去. .
就像问题章节的代码那种场景使用,我们就必须从组件中传一个历史参数过去…
<强> 2。使用上下文强>
react-router v4在路由器组件中通过康泰克斯暴露了一个路由器对象~
在子组件中使用上下文,我们可以获得路由器对象,如下面例子~
import React 得到“react"; import PropTypes 得到“prop-types"; class MyComponent  extends React.Component  { ,static contextTypes =, { ,路由器:PropTypes.object ,} ,构造函数(道具,上下文),{ ,超级(道具,背景); ,} ,…… ,myFunction (), { ,this.context.router.history.push(“/一些/Path"); ,} ,…… }
当然,这种方法慎用~尽量不用。因为反应不推荐使用康泰克斯哦。在未来版本中有可能被抛弃哦。
<强> 3。黑客强>
其实分析问题所在,就是v3中把我们传递给路由器组件的历史又暴露出来,让我们调用了~ ~
而react-router v4的组件BrowserRouter自己创建了历史,并且不暴露出来,不让我们引用了。尴尬~
我们可以不使用推荐的BrowserRouter,依旧使用路由器组件。我们自己创建历史,其他地方调用自己创建的历史。看代码~
我们自己创建一个历史
//, src/history.js import createHistory 得到& # 39;历史/createBrowserHistory& # 39;; export default  createHistory ();
我们使用路由器组件
//, src/index.js import {,路由器,链接,,Route },得到& # 39;react-router-dom& # 39;; import history 得到& # 39;。/历史# 39;; ReactDOM.render ( ,& lt; Provider 商店={商店}比; 历史,& lt; Router 历史={}祝辞 ,,… ,& lt;/Router> ,& lt;/Provider> ,. getelementbyid(& # 39;根# 39;), );
其他地方我们就可以这样用了
import history 得到& # 39;。/历史# 39;; export function  addProduct(道具),{ ,return dispatch =比; ,axios.post (“xxx”,道具、,配置) ,然后才能(response =祝辞,{ history.push才能(& # 39;/车# 39;);,//这里 ,,}); }react-router v4使用历史控制路由跳转的案例