一、什么是 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';