路由跳转方式

路由跳转方式

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组件的书写方式

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