前言

現在逛網站，其實愈來愈熟悉連續不間斷的操作體驗，也愈來愈沒耐心，如果按了按鈕還會跳白色畫面等個幾秒鐘，即便只是閃一下，都會默默在心裡扣分XD

而 React Router 做為一個 SPA 架構下的重要工具，扮演舉足輕重的角色，也是透過它，我們才能做出很棒的 UX，並且更好去切割前端的各個元件。

今天就來聊聊這個狠角色 React Router！

先想一下

• React Router 是在什麼樣的時代誕生的？
• React Router 怎麼解決問題？
• React Router 的優缺點是什麼？
• React Router 適合什麼情境？

React Router 是在什麼樣的時代誕生的？

在 MPA(Multi-Page Application) 為主的時代，一個應用程式利用多個 html 檔案來呈現，每點擊一個頁面就會讓整個網頁重新載入，連同其他的 JavaScript 及 CSS 檔案。

而 SPA(Single Page Application) 則是整個應用程式只有一個 index.html，如果需要切換頁面內容，就用 AJAX 方法來處理，在使用者發送請求並得到回覆後，僅針對需要變動的元素進行更新。

MPA 會透過切換網址來切換內容，比如：

• /home 會切換到「首頁」(home.index)
• /about 會切換到「關於我們」(about.index)
• /contact 會切換到「聯繫我們」(contact.index)

那 SPA 呢？想要切換網址來切換內容，但是我從頭到尾都只有一個 html 呀！該怎麼辦呢？

React Router 怎麼解決問題？

React Router enables "client side routing".

沒錯就這麼單純，React Router 其實就是做一件事 - 「前端路由」。

在 SPA 的網址更動時，為了不要整個頁面重新載入，需要透過路由來偵測並導流，僅針對程式中的局部重新載入。

但在 Day 5 有提過，React 本身並不是框架，而是一個 View library，它本身不帶有處理 router 的功能，因此才需要 React Router 登場！

流程與步驟大概是這樣：

1. 在 React-Router 註冊，A 網址對應 B 元件，C 網址對應 D 元件等
2. 使用者或程式切換到網址 C
3. 瀏覽器將「網址變動」事件通知 history 物件
4. history 物件再通知 React-Router 網址變成 C 了
5. React-Router 找到對應的 D 元件，丟給 React 開始 render

其中最關鍵的就是「發生變動時要通知」這個機制，也就是 observer pattern，必須要有這個機制，才能夠讓 React-Router 即時收到變化，並找出對應的元件。

React Router 的優缺點是什麼？

優點

• render 都在前端發生，降低後端的負擔
• 切換頁面不會整個白屏，使用者體驗較佳
• 前後端相依性降低，後端可以專注於 API 的設計

缺點

由於是 SPA 架構，開頭只有空白的畫面，內容都要靠後端回來，SEO 較弱

React Router 適合什麼情境？

功能導向、SaaS 型的網站，因為比較需要與使用者互動，會特別注重在使用者體驗：

• 按了 A 要顯示 B
• 表單送出重新 render 局部

但相對地，因為 SEO 較差，若是經營重視 SEO 的網站，可以用 SSR 技術去解決。

結語

心智圖放大版

其實今天這個標題比較是個假議題，因為用了 React Router 工具，其實就代表用了 SPA 的架構，而不是 MPA，因此比較起來，更像是在討論「why SPA?」

需注意可能還有些專案的 React-Router 版本停留在 v5 甚至以下的版本，但目前最新版本已經到 v6，查詢文件或討論時，務必先了解自己專案的 React-Router 版本，以免查到的東西不能用哦！

沒錯我就是苦主 Orz

參考資料

React Router
筆記長也