dva router4.0 使用實踐總結

一、概述

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-domreact-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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容