一、概述

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

react-router@4.0 讓路由變得更簡單，最大特點就是可以路由嵌套，可是如果照搬使用 react-router@4.0 的寫法，你會發現在 dva 中是行不通的，查看 dva/router 的源碼可以看到：

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

其中第一行導出的 react-router-dom 就是 react-router@4.0 文件，第二行導出的 react-router-redux 是 react-router 配合 redux 使用的中間庫。因為 dva 中使用到了 redux，所以我們在配置的時候還需要注意到這一點。

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

二、dva 中使用 router4.0

router.js

import React from 'react';
import { routerRedux, Route } from 'dva/router';
import Example from 'routes/Example';

const { ConnectedRouter } = routerRedux;

function RouterConfig({ history, app }) {

    return (
        <ConnectedRouter history={history}>
          <Route path="/" component={Example} />
        </ConnectedRouter>
    );

}

export default RouterConfig;

說明：

• Route 為 react-router-dom 內的標簽
• ConnectedRouter 為 react-router-redux 內的對象 routerRedux 的標簽，作用相當于 react-router-dom 中的 BrowserRouter 標簽，作用為連接 redux 使用。

三、react-router@4.0 常用標簽總結

英文不錯的建議直接去官網讀一手文檔，對于理解很有幫助。
react-router@4.0 文檔 API

以下內容僅為作者在閱讀時總結的內容。

1. BrowerRouter

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // 渲染為 <a href="/calendar/today">

2. Route

• route 的三種寫法
  • <Route component>
  • <Route render>
  • <Route children>
• route 傳給組件的參數
  • match 跟爸爸有關
    • isExact 是否完全匹配
    • params 參數，一般指path中的參數
    • path <route>中 path 屬性的值，與瀏覽器地址欄 url 進行匹配，“/topics/:topicId”
    • url Link 或者 a 標簽 中跳轉的地址，一般情況下為瀏覽器地址欄中地址，如果有 basename，瀏覽器地址欄為 basename + url 的值，“/topics/components”
  • location 跟自己有關
    • pathname 與 match 中的 url 屬性相同，“/topics/components”
    • hash: "" 不知所云，換成 hashHistory 也沒有值
    • key: "" 隨機生成一個6位的字符串，唯一喔
    • search: "" 參數
  • history
    • -history對象，可以通過代碼控制前進、后退
• <route> 屬性
  • path 匹配的路徑 “/topics/:topicId”
  • exact 完全匹配
  • strict 結尾斜線匹配

3. Redirect

redirect 重定向到新頁面會在歷史記錄棧中替換當前頁面，也就是點擊瀏覽器中后退按鈕，不會從新頁面回到當前頁面。

• to 值為字符串，跳轉到新位置，自執行。
• to 值為對象，最終會轉換為一個位置地址。
• push 值為 true 時不會替換當前頁面，而是在歷史記錄棧中新增一條記錄。
• from 相當于 <route> 中的 path 屬性，匹配 url 地址，匹配成功，跳轉到另一個 url 地址。

4. Link

• to 值為字符串
  該字符串值會與 <route> 中的 path 屬性值進行匹配，如果匹配成功，跳轉 <route> 中的 component 屬性值。
• to 值為對象
  對象值最終也會轉換為 url 值。to 屬性相當于 <a> 標簽中的 href 屬性。

  <Link to={{
    pathname: '/courses',
    search: '?sort=name',
    hash: '#the-hash',
    state: { fromDashboard: true }
  }}/>
  

• replace
  相當于微信小程序中的 redirect 屬性
  設置為 true 表示替換 history 中的當前頁面，設置為 false 為在 history 中新增一條歷史記錄。

5. switch

• 只會運行其中一個 <route>，
• 子元素只能是 <route> 或者 <redirect>