browserHistory和hashHistory的差異

一：對比這兩個方式：

    不管是react，dva,仍是antd pro，前端路由使用的是react router，全部能夠選擇兩種方式：browserHistory和hashHistory。

二者的區別簡單來講是對路由方式的處理不同，hashHistory 是以 # 後面的路徑進行處理，經過 HTML 5 History 進行前端路

由管理，而 browserHistory 則是相似咱們一般的頁面訪問路徑，並無 #，經過服務端的配置，可以訪問指定的 url 都定向到

當前頁面，從而可以進行前端的路由管理。

因此若是你的 url 裏有 #，想去掉的話，須要切換爲 browserHistory。

若是你使用的是靜態站點，那麼使用 browserHistory 可能會沒法訪問你的應用，由於假設你訪問 

http://localhost:8000/dashboard/monitor，那麼其實你的靜態服務器並無可以映射的文件，而使用 hashHistory 則不會有

這個問題，由於它的頁面路徑是以 # 開始的，全部訪問都在前端完成，如：http://localhost:8000/#/dashboard/monitor。

不過若是你有對應的後臺服務器，那麼咱們推薦採用 browserHistory，只須要在服務端作一個映射。

二：聊聊history

histoty 是 RR4 的兩大重要依賴之一（另外一個固然是 React 了），在不一樣的 javascript 環境中， history 以多種可以行駛實現了對會話（session）歷史的管理。

咱們會常常使用如下術語：
"browser history" - history 在 DOM 上的實現，用於支持 HTML5 history API 的瀏覽器
"hash history" - history 在 DOM 上的實現，用於舊版瀏覽器。
"memory history" - history 在內存上的實現，用於測試或非 DOM 環境（例如 React Native）。

history 對象一般具備如下屬性和方法：

length: number 瀏覽歷史堆棧中的條目數 action: string 路由跳轉到當前頁面執行的動做，分爲 PUSH, REPLACE, POP location: object 當前訪問地址信息組成的對象，具備以下屬性： pathname: string URL路徑 search: string URL中的查詢字符串 hash: string URL的 hash 片斷 state: string 例如執行 push(path, state) 操做時，location 的 state 將被提供到堆棧信息裏，state 只有在 browser 和 memory history 有效。 push(path, [state]) 在歷史堆棧信息里加入一個新條目。 replace(path, [state]) 在歷史堆棧信息裏替換掉當前的條目 go(n) 將 history 堆棧中的指針向前移動 n。 goBack() 等同於 go(-1) goForward 等同於 go(1) block(prompt) 阻止跳轉 history 對象是可變的，由於建議從 <Route> 的 prop 裏來獲取 location，而不是從 history.location 直接獲取。 ---------------------  做者：qq_29854831  來源：CSDN  原文：https://blog.csdn.net/qq_29854831/article/details/79636095  版權聲明：本文爲博主原創文章，轉載請附上博文連接！