全方位解析createBrowserHistory

一、介紹

React Router 是 React 之一重要的第三方庫，它已經成為構建 Web 應用程序的標準方式。Browser history 對象是 React Router 將 URL 和 UI 同步的關鍵。從 version 6.0.0 開始，React Router 更換為了使用 createBrowserHistory 來創建 history 對象。本篇文章將從多個方面詳細闡述 createBrowserHistory 相關內容。

二、createBrowserHistory 基礎知識

createBrowserHistory 實際上創建了一個 history 對象，對傳統 HTML5 History API 進行了封裝。history 對象是一個 JavaScript 對象，提供了對 window 的 history 調用的封裝。我們可以使用在 React Router 中使用該對象來將 URL 和 UI 保持同步。

三、createBrowserHistory 代碼演示

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
history.push('/home'); 
history.goBack();

以上代碼演示了如何使用 createBrowserHistory 來創建 history 對象，並如何使用這個對象來更新 URL。可以看到，通過使用 history.push(‘/home’) 函數，我們可以將 URL 更新為 /home。而 history.goBack() 函數可以將用戶前往上一個頁面。

四、createBrowserHistory 參數

createBrowserHistory 支持傳遞參數來更細粒度地控制 history 對象的行為。下面是部分常用的參數：

4.1 forceRefresh

import { createBrowserHistory } from 'history';
const history = createBrowserHistory({forceRefresh:true});

forceRefresh (boolean)：如果設置為 true， 當 history 發現 URL 和當前的 URL 不同，它將導致頁面重新加載。這與 window.location = url 所具有的相同的行為。

4.2 basename

import { createBrowserHistory } from 'history';
const history = createBrowserHistory({basename:'/myapp'});

basename (string)：basename 能夠讓所有的 location.pathname 前綴被忽略。舉個例子，如果你正在 /myapp 路徑下使用該 history，那麼您的代碼不需要知道它，因為所有的 url 都將與 /myapp 前綴相匹配。

4.3 hashType

import { createBrowserHistory } from 'history';
const history = createBrowserHistory({hashType:'slash'});

hashType (string)：hashType 消除哈希前綴和路徑前綴之間的混淆，接受兩個值：slash 和 noslash。當使用 slash 時，路徑是從 / 開始的，並且不包含哈希符號。而在使用 noslash 時，則是路徑去掉第一個斜杠，並包含哈希符號。

五、createBrowserHistory 實現原理

history 對象是 createBrowserHistory 函數的返回值，該函數內部採用了 HTML5 History API 提供的 pushState，replaceState 和 popstate 三個 API 來實現頁面跳轉和 history 對象的狀態修改。

該函數還包含一些 otherFunctions，其中最常用的兩個是 block 和 listen。它們用於阻止add,delete,update這些操作，和監聽當前 URL 的變化。在其他的 React 組件中，我們可以使用路由鉤子通過 block 函數來攔截導航。這樣一來的話， currentLocation 就代替了 history 的行為。

六、總結

createBrowserHistory 函數是實現 React Router 4 的必要條件之一。它是 React Router 庫建立在 HTML5 History API 之上的封裝器。同時，使用 createBrowserHistory 可以對應用程序行為進行細粒度的控制，實現用戶友好的頁面轉換。