ReactRouter中HashRouter和BrowserRouter的區別

僅我的理解，若有不當請指正

1、從原理上

HashRouter在路徑中包含了#，至關於HTML的錨點定位。（# 符號的英文叫hash，因此叫HashRouter，和散列不要緊哦））

而BrowserRouter使用的是HTML5的新特性History，沒有HashRouter(錨點定位)那樣通用，低版本瀏覽器可能不支持。

2、從用法上

BrowserRouter進行組件跳轉時能夠傳遞任意參數實現組件間的通訊，而HashRouter不能(除非手動拼接URL字符串)，所以通常配合Redux使用，實現組件間的數據通訊。

3、生產實踐

1.HashRouter

 HashRouter至關於錨點定位，所以不論#後面的路徑怎麼變化，請求的都至關因而#以前的那個頁面。能夠很容易的進行先後端不分離的部署(也就是把前端打包後的文件放到服務器端的public或static裏)，

由於請求的連接都是ip地址:端口/#/xxxx，所以請求的資源路徑永遠爲/，至關於index.html，而其餘的後端API接口均可以正常請求，不會和/衝突，因爲先後端不分離也不會產生跨域問題。

缺點就是醜，路徑裏總有個#，寶寶表示強迫症犯了...

2.BrowserRouter

由於BrowserRouter模式下請求的連接都是ip地址:端口/xxxx/xxxx，所以至關於每一個URL都會訪問一個不一樣的後端地址，若是後端沒有覆蓋到路由就會產生404錯誤。

能夠經過加入中間件解決，放在服務器端路由匹配的最後，若是前面的API接口都不匹配，則返回index.html頁面。但這樣也有一些小問題，由於要求前端路由和後端路由的URL不能重複。

好比商品列表組件叫/product/list，而請求商品列表的API也是/product/list，那麼就會訪問不到頁面，而是被API接口匹配到。

解決方法:

進行先後端分離的部署，好比前端地址ip1:端口1，後端接口地址ip2:端口2，使用Nginx反向代理服務器進行請求分發。前端向後端發起請求的URL爲nginx所在的服務器+/api/xxx，經過NGINX的配置文件判斷，若是URL以api開頭則轉發至後端接口，不然轉發至前端的地址，訪問項目只需訪問Nginx服務器便可。