前端路由設計心得
目前為止的心得是——前端路由就負責兩件事：「反應使用者的旅程階段」或「保存狀態」。
功能一：反應使用者的旅程階段
使用者的瀏覽紀錄要能反應其旅程（user’s browser history accurately reflects their journey through your application）。因此，當使用者在服務的不同階段移動時，路由就該變化。比如：
- 使用者從購物網站的首頁（
/）進入某個商品的說明頁（/item/$itemId） - 使用者決定為購物車（
/chart）結帳（/checkout）
而以下「沒有開啟新脈絡（前端在背景默默做掉就好）」的操作情境，就不需要改變路由：
- 使用者對某個商品留下評價
- 使用者Ａ向使用者Ｂ送出好友邀請
- 使用者對某條貼文按下、收回讚
功能二：保存狀態
如果某狀態需要在畫面重整之間持續，或是在多個裝置、平台間傳遞，那就可以考慮將狀態帶入路由。比如：
- 讓使用者分享他的設定，比如「購物網站裡屬於品牌Ｘ的商品，並以網格模式顯示（
/brand/X?show=GRID）」 - 註記使用者的來源，比如 [GA4] Campaigns and traffic sources
- 在不使用帳號系統的情況下，讓使用者分享他的螢光筆標記（下述）
備註：只是要滿足「狀態於畫面重整之間持續」的話，也可以用 window.localStorage / window.sessionStorage 處理。
變化的部位
Location.pathname代表「階層」的概念；比如/friend這個頁面會列出某使用者的所有朋友，而/friend/25會指向「與該位朋友的互動紀錄頁」Location.search代表「過濾、排序」的概念；比如/friend?category=acquaintance會讓使用者看到他設定為「點頭之交」的朋友，而/friend?sort=DESC會將該使用者的朋友們以「成為朋友的日期」來排序Location.hash用來定位「一份文件中的特定位置」，比如/hooks#use-state用來指向 React hooks 中useState的說明段落- 不屬於
Location的 Text fragments 能在不使用帳號系統的情況下，讓使用者分享他的螢光筆標記（參考 Session (computer science) from Google search result 和 Session (computer science) direct link 這組對比）——但要注意目前 FireFox 還不支援此規格