React Router

後端路由 VS 前端路由

後端路由??

CSS、HTML、JS、XML等等的檔案都放在後端Server
提交Request到Server，後端去match路由，找不到就回404
找得到就拼成完整的HTML回傳給前端，接著瀏覽器渲染。

backend Router

前端路由??

輸入URL，後端會回傳不完整的HTML，前端會分析並匹配路徑，再渲染相關組件。

frontend router

後端路由優點：

• 有利於SEO優化，因為後端有完整的資料，有利於爬蟲
• 占用客戶端資源較少，因為都在Server端處理玩了XD
• 渲染速度比較快，因為前端路由要用JS動態拼接
  適合用在 互動性比較單純，十分要求SEO

前端路由優點：

• 減少很多Server端壓力
• 大多時候不需要重新完全渲染

前端路由 react-router-dom

以下使用react-router-dom

安裝

yarn add react-router-dom

BrowserRouter

URL更新時會發送Request，如果刷新會回到根目錄

• 可以用state傳遞值，不用明文顯示在URL中
• 可以用HTML5 History API
• URL美觀

缺點：

• 不兼容IE9及以下版本

Get YH’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

HashRouter

URL顯示有#(錨點)，#後面的字串並不會Request到後端
不會去檢查是不是真的有#後面那個檔案，所以比較不會有路徑出錯的問題

• window.location.hash、hashchange

缺點：

• State重新整理會丟失

Route

定義path

Switch

會渲染包在<Switch></Switch>內第一個符合條件的元件
如果沒用的話，有符合的都會渲染

Link

被點擊後可以轉換當下的url
跟History API的pushState的差別是，Link是用於"被點擊"的時候才會轉換

NavLink

有樣式的Link

History API

pushState

history.length會+1，切換上下頁時會有影響

window.history.pushState( state, title, url );

• state: 要傳送的參數
• title: 標題，爬文看起來目前沒什麼用，瀏覽器不支援
• url: 導向的url

replaceState

history.length不會有改變，其他跟pushState一樣

window.history.replaceState( state, title, url);

popstate

當使用者"回上一頁"或"到下一頁"會觸發，可以listen去做一些處理

window.addEventListener("popstate", function(e) {
    const state = e.state;
});