React Router Dom: BrowserRouter vs HashRouter

前言

今天主要粗略講一下 BrowserRouter 和 HashRouter，兩者的分別。最重要的是，如果你不想在你的 SPA (Single-Page-Application) 上使用 HashRouter，那要怎麼解決 404 的問題呢？

BrowserRouter

BrowserRouter 建基於 HTML history API。BrowserRouter 使前端可以很輕鬆的用簡潔的 url 來管理頁面 (e.g. mysite.com/products)，不過前提網頁是 SSR (Server-Side-Rendering) 。

因為當你嘗試連上 mysite.com/products 這個網頁的時候，你的瀏覽器會向 mysite.com/products 發送請求。然而 SPA 只有一頁 index.html。當沒有後台處理這個狀況的時候，就會發生 404 錯誤。

這種狀況一般只有在你嘗試刷新頁面的時候才會發生，因為當你在使用 SPA 的時候，前端程式並不會向伺服器發送請求。但是當你在 mysite.com/products 時，嘗試重新整理，你的瀏覽器就會發出對 mysite.com/products 這個網址的請求，然而這個路徑並沒有實際存在，所以在不是 SSR 的情況下，頁面只會顯示 404 。

針對這種狀況，我們可以用 HashRouter 來處理。

HashRouter

HashRouter 使用 hash url 來處理瀏覽路徑 (e.g. mysite.com/#/home)，只要加了這個 #，無論你怎麼刷新，你的瀏覽器都不會對你當下的路徑作出請求，所以再也不會有 404 這樣的問題。HashRouter 非常試合 SPA 使用。

我個人認為，使用 HashRouter 的最大缺點就是你的網址會長得很醜。當然，HashRouter 也沒辦法用在需要 SSR 的頁面。

在 SPA 上使用 BrowserRouter ?

那假如你真的覺得 HashRouter 很醜，然後哭著對我說：「我也想要用 BrowserRouter 這個酷酷的東西。」。那可不可行呢？

答案是肯定的，方法我會以 Google Cloud Platform 的 Storage Web Hosting 示範。

首先，我們來到 Cloud Storage 的管理頁面，我們可以看到 xxx.club 的網域值區。這就是我們網頁放置的地方。如果對 Cloud Storage Web Hosting 有興趣，可以參考這篇。

接著我們需要點選最右邊的三點圖標，再選擇編輯網站設定。

我們打開設定方塊，在這裏，我們可以設定我們的首頁的 html 檔案以及錯誤頁面的 html 檔案。一般來說就是 index.html 以及 404.html。

可惜，我們 SPA 不能盲目按照說明行事。試想想，向之前提到的一樣，當你的 SPA 重新刷新的時候，瀏覽器會嘗試向後端發送網址的請求，這個時候，Cloud Storage 就會因為 404 錯誤，然後把 404.html 端給客戶端。這不是我們想要的。

我們需要動點手腳，就是把錯誤頁面也同樣設定成 index.html。這樣一來，不管瀏覽器怎麼發送請求，不管結果如何，Cloud Storage 只會向客戶端送出 index.html。善用此技巧，你就可以用 BrowserRouter 來開發你的 SPA。

如果這篇文章有幫的上忙，請幫忙點讚，追蹤及分享。

我是老虎！

Happy Coding !

Reference

• https://medium.com/@daniel.hramkov/browserrouter-vs-hashrouter-e8bf1c3824ce
• https://stackoverflow.com/questions/51974369/what-is-the-difference-between-hashrouter-and-browserrouter-in-react