dva 配置 browserHistory 實踐總結

一、什么是 History

1. 概述

history 是歷史記錄管理。點擊 a 標簽跳轉或者點擊瀏覽器后退按鈕,總之頁面進行跳轉時,history 都會記錄這一步操作,方便后面 go、back 等操作。

三種 history:

  • hashHistory 老版本瀏覽器的 history。
  • browserHistory h5的history。現在的 web 項目都使用這種。
  • memoryHistory node環境下的 history,存儲在 memory中。

2. 如何辨別 history 屬于哪一種?

  • 瀏覽器地址看地址url,如果有 #,那么就是 hashHistory了;

  • 在代碼中 'pushState' in window.history 如果為 true 說明是 browserHistory。

    這是因為 browserHistory API 有 pushState, replaceState, popState。保持 ui(頁面) 和 url(瀏覽器地址欄地址) 同步。地址欄地址變化,頁面也同步變化。

3. browserHistory 為什么會出現,相對 hashHistory 有什么進步?

  • hashHistory 連續點擊同一個鏈接會報錯

    使用 hashHistory,連續點擊一個鏈接會報錯:Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack
    but 使用 browserHistory 就不會出現這種情況。連續點擊一個鏈接,第二次依然會有反應,但不會報錯。

    產生這種差異的原因是機制問題,hashHistory 制作一個棧來存放歷史記錄,且不允許連續兩個歷史記錄相同。browserHistory 就允許連續兩次歷史記錄相同。

    測試:連續點擊一個鏈接四次,再點擊瀏覽器的后退按鈕,看
    hashHistory 與 browserHistory 的差別。

  • 還有一個差異:hashHistory 不能很好的支持 basename。

4. 如何查看 history 中歷史記錄。

直接查看具體的歷史記錄只能到瀏覽器-選項-歷史記錄中查看。
通過代碼的形式查看 window.history 打印出對象有個 length 屬性,記錄歷史記錄的條數。點擊一條鏈接之后再打印 window.history 可以查看變化。

補充:瀏覽器中一個選項卡會單獨記錄它的歷史記錄,關閉瀏覽器選項卡重新打開之后又會從 1 開始計數。

二、dva 中如何使用 History

dva 官方文檔提供的 api 可自由選擇使用哪種 history,但是測試時貌似不行,只能使用 hashHistory,這個 bug 截止 2.0.3 版本還未修復。

import { browserHistory } from 'dva/router';
const app = dva({
  history: browserHistory,
});

【替代方法】使用 history 這個第三方庫。

  1. 安裝

    $ npm install history
    
  2. 修改 index.js 文件

    import { createBrowserHistory as createHistory } from 'history';
    
    const app = dva({
      history: createHistory()
    });
    

通過以上配置就已經使用了 browserHistory 了,如果這里沒有感官認識,可以換成 hashHistory 刷新頁面觀察瀏覽器地址欄變化。

  • 創建 hashHistory:

import { createHashHistory as createHistory } from 'history';

  • 創建 memoryHistory:

import { createMemoryHistory as createHistory } from 'history';

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

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,869評論 18 139
  • 一、概述 dva 升級到 2.0 版本以后,也將內部使用的 dva/router 從 react-router@3...
    dkvirus閱讀 34,053評論 1 14
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25 708
  • 這半輩子顛簸 像一把雜亂的種子 隨波逐流的撒了一把在這江南的角落 但我深知只是過客 是發不了芽的 過年本是歸家的喜...
    得一生二閱讀 304評論 0 0
  • 大學生痛點調查也就是找出大學生的關鍵問題。這一步的調查,我們選擇了面對面問卷采訪,為什么不選擇網絡問卷呢?在這里我...
    迷之感動阿里嘎多閱讀 995評論 0 0