概述

在上篇 dva router4.0 使用實(shí)踐總結(jié) 中主要介紹了 dva 中使用 react-router@4.0 標(biāo)簽寫(xiě)法控制路由。如下：

        <Switch>
          <Route path="/" exact render={() => (<Redirect to="/dashboard" />)} />
          {
            routes.map(({ path, ...dynamics }, key) => (
              <Route
                exact
                key={key}
                path={path}
                component={dynamic({ app, ...dynamics })}
              />
            ))
          }
          <Route component={error} />
        </Switch>

但是實(shí)際開(kāi)發(fā)中，我們可能會(huì)需要在代碼中進(jìn)行路由的跳轉(zhuǎn)。本文主要介紹在 dva 中使用代碼進(jìn)行路由跳轉(zhuǎn)以及參數(shù)傳遞。

理清關(guān)系

dva 升級(jí)到 2.0 版本以后，也將內(nèi)部使用的 dva/router 從 react-router@3.0 升級(jí)到了 react-router@4.0。react-router@4.0 文檔 API

react-router@4.0 讓路由變得更簡(jiǎn)單，最大特點(diǎn)就是可以路由嵌套，可是如果照搬使用 react-router@4.0 的寫(xiě)法，你會(huì)發(fā)現(xiàn)在 dva 中是行不通的，查看 dva/router 的源碼可以看到：

// dva/router.js
module.exports = require('react-router-dom');
module.exports.routerRedux = require('react-router-redux');

其中第一行導(dǎo)出的react-router-dom就是 react-router@4.0 文件，第二行導(dǎo)出的react-router-redux是 react-router 配合 redux 使用的中間庫(kù)。因?yàn)?dva 中使用到了 redux，所以我們?cè)谂渲玫臅r(shí)候還需要注意到這一點(diǎn)。

由于 dva 將react-router-dom和react-router-redux都封裝到了 dva/router 中，在使用 react-router@4.0 和 redux 里面的東西時(shí)只需引入 dva/router 這個(gè)包即可。

路由跳轉(zhuǎn)

引入 dva/router，使用 routerReux 對(duì)象的 push 方法控制，值為要跳轉(zhuǎn)的路由地址，與根目錄下 router.js 中配置的路由地址是相同的。routerReux 就是上面 dva/router 第二個(gè)導(dǎo)出的 react-router-redux 包對(duì)象。

此處示例為跳轉(zhuǎn)到 /user 路由。

// models > app.js
import { routerRedux } from 'dva/router';

export default {
  // ...
  effects: {
      // 路由跳轉(zhuǎn)
      * redirect ({ payload }, { put }) {
        yield put(routerRedux.push('/user'));
      },
  }
  // ...
}

攜帶參數(shù)

有時(shí)路由的跳轉(zhuǎn)還需要攜帶參數(shù)。

傳參：

routerRedux.push 方法的第二個(gè)參數(shù)填寫(xiě)參數(shù)對(duì)象。此處示例表示跳轉(zhuǎn)到 /user 路由，并攜帶參數(shù) {name: 'dkvirus', age: 20}。

// models > app.js
import { routerRedux } from 'dva/router';

export default {
  // ...
  effects: {
      // 路由跳轉(zhuǎn)
      * redirect ({ payload }, { put }) {
        yield put(routerRedux.push('/user', {name: 'dkvirus', age: 20}));
      },
  }
  // ...
}

接收參數(shù)：

// models > user.js
export default {
  subscriptions: {
    /**
     * 監(jiān)聽(tīng)瀏覽器地址，當(dāng)跳轉(zhuǎn)到 /user 時(shí)進(jìn)入該方法
     * @param dispatch 觸發(fā)器，用于觸發(fā) effects 中的 query 方法
     * @param history 瀏覽器歷史記錄，主要用到它的 location 屬性以獲取地址欄地址
     */
    setup ({ dispatch, history }) {
      history.listen((location) => {
        console.log('location is: %o', location);
        console.log('重定向接收參數(shù)：%o', location.state)
        // 調(diào)用 effects 屬性中的 query 方法，并將 location.state 作為參數(shù)傳遞 
        dispatch({
          type: 'query',
          payload: location.state,
        })
      });
    },
  },
  effects: {
    *query ({ payload }, { call, put }) {
       console.log('payload is: %o', payload);
    }
  }
  // ...
}

在 user.js 中 subscriptions 屬性會(huì)監(jiān)聽(tīng)路由。當(dāng) app.js 中通過(guò)代碼跳轉(zhuǎn)到 /user 路由，models>user.js>subscriptions 屬性中的 setup 方法會(huì)被觸發(fā)，location 記錄著相關(guān)信息。打印如下。

location is: Object
    hash: ""
    key: "kss7as"
    pathname: "/user"
    search: ""
    state: {name: "bob", age: 21}
重定向接收參數(shù)：Object
    age:21
    name:"bob"

可以看到 location.state 就是傳遞過(guò)來(lái)的參數(shù)。在 subscriptions 中可以使用 dispatch 觸發(fā) effects 中的方法同時(shí)傳遞參數(shù)。

需要注意的事，在 dva@1.* 版本中，要獲取對(duì)象還要用 location.query 對(duì)象，而到了 dva@2.* 就變成了 location.state 對(duì)象。