dva-react踩坑记录之使用页面window跳转

75 阅读 0 评论 50 点赞

我是靠谱客的博主风中美女，最近开发中收集的这篇文章主要介绍dva-react踩坑记录之使用页面window跳转，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

关于在页面使用window.location.href跳转至相应的页面处理办法

  turn=(type)=>{
    if(type=='9k9'){
      window.location.href='/#/coupon/postageNine/:type=9k9';//跳转至9块9包邮
    }
    if(type=='chanel'){
      window.location.href='/#/coupon/postageNine/:type=chanel';//跳转至品牌清仓
    }

  }

如果需要在页面获取路径传过来的参数

首先我们需要修改路由，在路径里面加上参数且在参数使用:

<Route path="/coupon/postageNine/:type" exact component={PostageNinePage}/>

通过如上配置我们是不是就可以点击实现页面跳转了呢

经过测试我们发现，浏览器地址已改变但是页面是一片空白，那么是什么问题导致的呢，熟悉dva的同学都知道，应该是我们model出现问题，我们每个页面会有一个对应的model.js，我们打开model.js，如代码：

  subscriptions: {
    setup({dispatch, history}) {

       return history.listen(({pathname}) => {
         if (pathname === '/coupon/postageNine') {
           dispatch({type: 'fetch'});
         }
       });
   }

我们看一下subscriptions 这个属性，我的理解是监听路径，页面初始化的时候会进入subscription中的setup方法，通过判断路径的值然后加载数据前面我们对路由进行修改，所以我们现在需要修改pathname的值，我们将参数加在后面看是否可行;


  subscriptions: {
    setup({dispatch, history}) {

       return history.listen(({pathname}) => {
         if (pathname === '/coupon/postageNine/:type') {
           dispatch({type: 'fetch'});
         }
       });
}

经过测试发现页面还是空白的，说明这种方式应该是不行的，那么我们应该怎么修改pathname的值呢？

这里楼主想到一个办法通过正则判断路径，话不多说直接看代码：

 return history.listen(({pathname}) => {
        const match = pathToRegexp('/coupon/postageNine/:type').exec(pathname);
         if (match) {
           console.log(match);
           dispatch({type: 'fetch', payload: type});
         }
      });

我们切换到浏览器然后再次触发点击函数，我们可以看见页面已经跳转成功有数据，且有输出match值（注意：

在使用之前我们需要 npm install path-to-regexp -save 导入依赖，然后 import pathToRegexp from 'path-to-regexp';）

我们看一下打印出来的match的值：

["/coupon/postageNine/:type=9k9", ":type=9k9", index: 0, input: "/coupon/postageNine/:type=9k9"]

那么成功跳转了，我们如何对match数组取值呢 ,我们可以了解到macth是一个类似数组的东西，取值不用多说直接上代码吧

 return history.listen(({pathname}) => {
        const match = pathToRegexp('/coupon/postageNine/:type').exec(pathname);
         if (match) {
           console.log(match);
            const type = match[1].split(":type=")[1];
           dispatch({type: 'fetch', payload: type});
         }
      });

Ok取值成功！那么如何将该值放到state中呢，如上段代码我们将type放到payload对象中

使用dispatch方法加载effect 中的 fetch方法，进入fetch 方法的时候使用yeild put 方法加载reducer方法中的saveType方法存到state中

 effects: {
    /*进入页面加载*/
    *fetch({payload:type,catId}, {call, put}) {
      console.log(type)
      //四大分类
      yield put({type:'saveType',payload:{type:type}})
}，

  reducers: {
    saveType(state, {payload}){
      return {
        ...state,
        type:payload.type
      }
    }
  },

然后在对应的页面就可以使用了！第一种方式就完成了！！

另外官方好像还提供了一种方法：

1.在Route中定义好匹配的路径和参数，例如：path="/product/:goodsname"

2.在组件中调用 { this.props.match.params.goodsname} 就可以获取设定的参数了

用class定义组件的时候dva封装了一些固定参数，在没有调用其他框架插件的时候分别为：

match, location, history, staticContext, dispatch 用this.props+以上参数就能访问这些参数的属性

各位小伙伴可以自己动手试试！！

-----------------------------------------------------------------------更新--------------------------------------------------------------------------------------------

偶然间发现一种在组件中新的方式传值,当然我这里是用的this.props.dispatch，window.location.href也可以，大致步骤和上面差不多，只需要修改两个地方，第一个地方，跳转页面的方法

使用"~"这个符号代替上面的"",代码如下：

 this.props.dispatch(routerRedux.push(`/coupon/postageNine/${type}`));

多个参数：

 this.props.dispatch(routerRedux.push(`/coupon/postageNine/${type}/${type1}/${type2}`));

然后第二个需要修改的地方就是model里面:

 setup({dispatch, history}) {
      return history.listen((location) => {
        const match = pathToRegexp('/coupon/postageNine/:type').exec(location.pathname);
        if (match) {
          var type = match[1]
          dispatch({type: 'fetch', payload: type});
        }
      });
    },

取值：第一个参数直接match[1],第二个参数直接match[2],这样值就可以取出来了，是不是比第一种方式方便多了，而且这种方式浏览器中地址更美观。

--------------------------------------------------来自不正经的程序袁 For the Peace and Love-------------------------------------------------