在開始React之旅前，必須先了解一下什麼是SPA。
相較於過去使用的多頁式(MPA)網頁開發，大多是一個一個頁面切換，點選一個按鈕，重新載入另外一個頁面。現今前端框架React、vue、Angular都是用SPA（single-page applications），也就是所謂的單頁面應用程式。

單頁面應用程式說白話一點就是把所有資料都放在同一個頁面，所以SPA不需要換頁，使用者可以在單一頁面裡瀏覽全部內容，也就是說只會一個index.html 檔。

當我們訪問SPA時，瀏覽器會下載整個應用程式的資料；當瀏覽應用程式的不同部分時頁面不會重新載入。

這是因為SPA在瀏覽器而不是在伺服器上執行邏輯。它使用JavaScript框架來實現這一點，JavaScript框架可以在客戶端處理大量資料。JavaScript還允許SPA只重新載入使用者請求的部分，而不是整個應用程式。因此，SPA以提供快速高效的效能而聞名。

可能有人會疑惑，要在單一頁面瀏覽所有內容，那要怎麼做頁面的切換?
解決辦法就是在網址後面加個#，後面接要切換到的頁面，來辨別現在的位置。(即是 react-router 的 hashRouter)
假如: 我們網址是 https://myexample.com/index.html，若切換到購物車頁面，網址會變成是https://myexample.com/index.html#shoppingcart

以實際的例子最能夠理解，最經典的SPA例子就是 Gmail。
當我們在用 Gmail 的時候，完全沒有換頁。全部的動作都是在「同一個頁面」上面發生的，所以你載入的檔案從頭到尾就只有一個 index.html，完全沒有換過。

當我們在 Gmail 上面做的任何動作，都是用 ajax 發 request 給 server，server 回傳資料以後 client 端再用 JavaScript 把畫面 render 出來。

所以在使用 Gmail 時，會感覺好像在用一個 App 而不是在用網頁，因為頁面之間的跳轉很流暢，不像一般網頁中間可能會有白屏出現，有更好的使用體驗。

以上即是今天針對SPA的整理，謝謝

參考來源: https://www.gushiciku.cn/pl/pGDD/zh-tw