一、概述
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對象,可以通過代碼控制前進、后退
- match 跟爸爸有關
- <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>