1. 程式人生 > >ReactRouter中HashRouter和BrowserRouter的區別

ReactRouter中HashRouter和BrowserRouter的區別

僅個人理解,如有不當請指正

一、從原理上

HashRouter在路徑中包含了#,相當於HTML的錨點定位。(# 符號的英文叫hash,所以叫HashRouter,和雜湊沒關係哦))

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

二、從用法上

BrowserRouter進行元件跳轉時可以傳遞任意引數實現元件間的通訊,而HashRouter不能(除非手動拼接URL字串),因此一般配合Redux使用,實現元件間的資料通訊。

三、生產實踐

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伺服器即可。

&n