美文网首页
路由跳转方式

路由跳转方式

作者: 林ze宏 | 来源:发表于2018-11-11 00:00 被阅读0次

    路由跳转方式

    UI component主要是利用history属性。在effects中进行路由跳转,主要利用 react-router-redux这个库。

    方式一

    如果组件是直接在router中定义的组件,组件本身传入的props,就有history对象了,直接使用即可。

    直接取出history 打印props
    方式二

    如果组件为子组件,或者是邻居组件等,一层一层传入history比较麻烦,所以,可以利用 withRouter进行跳转。

    withRouter属性
    方式三

    在页面直接利用 Link标签进行跳转。

    Link
    方式四
    通过react审查元素,可以看到context中有history对象,所以,可以利用context上下文,取出router中的内容,就有history对象了。 react审查元素

    实现:

    实现 实现,打印context对象的值

    关于如何取出组件context,可以参考:
    https://www.jianshu.com/writer#/notebooks/21173890/notes/31316205/preview

    方式五

    dva中,有使用 react-router-redux 这个库,所以,可以利用该库的push方法,在effects中进行路由跳转。

    dva源码有routerRedux导出

    实现:

    // import { delay } from 'redux-saga';
    import { delay } from 'dva/saga';
    import key from 'keymaster';
    import { routerRedux } from 'dva/router';
    
    export default {
      namespace: 'counter',
      state: {
        count: 0,
        record: 0,
      },
      reducers: {
        'add'(state, { type, payload }) {
          const newCount = state.count + 1;
          const r = state.record > newCount ? state.record : newCount;
          return {
            ...state,
            count: newCount,
            record: r
          }
        },
      },
      effects: {
        *asayAdd(action, { put, call, select }) {
          console.log(routerRedux);
          yield call(delay, 1000);
          yield put({ type: 'add' }); // 同一个model不用加namespace
          yield put(routerRedux.push('/'));
        }
      },
      subscriptions: {
        keyboardWatcher({ dispatch }) {
          key('⌘+up, ctrl+up', () => { dispatch({ type: 'add' }) });
        },
      },
    }
    
    
    
    图示,简单没有带参数方式
    打印routerRedux值: 打印routerRedux值

    上面routerRedux.push是没有带参数的,如果带参数的话,如下所示:

    // import { delay } from 'redux-saga';
    import { delay } from 'dva/saga';
    import key from 'keymaster';
    import { routerRedux } from 'dva/router';
    import queryString from 'query-string';
    
    export default {
      namespace: 'counter',
      state: {
        count: 0,
        record: 0,
      },
      reducers: {
        'add'(state, { type, payload }) {
          const newCount = state.count + 1;
          const r = state.record > newCount ? state.record : newCount;
          return {
            ...state,
            count: newCount,
            record: r
          }
        },
      },
      effects: {
        *asayAdd(action, { put, call, select }) {
          console.log(routerRedux);
          yield call(delay, 1000);
          yield put({ type: 'add' }); // 同一个model不用加namespace
          yield put(routerRedux.push({
            pathname: '/',
            search: queryString.stringify({
              name: 'xiaoming',
              age: 11
            })
          }));
        }
      },
      subscriptions: {
        keyboardWatcher({ dispatch }) {
          key('⌘+up, ctrl+up', () => { dispatch({ type: 'add' }) });
        },
      },
    }
    
    
    
    

    说明:
    对于参数的处理,使用query-string这个库。

    有带参数 在地址栏显示为: url显示

    扩展:

    在react中,withRouter是从react-router-dom库传入的。但在dva中,dva进行了封装,可以从dva/router中传入的,但是,从react-router-dom也是没有问题的。

    有connect和withRouter的情况,export组件的书写方式

    如上图方式二中的图片所示。

    相关文章

      网友评论

          本文标题:路由跳转方式

          本文链接:https://www.haomeiwen.com/subject/ibjnxqtx.html