普通文組 2.5

前端路由設計心得

目前為止的心得是——前端路由就負責兩件事:「反應使用者的旅程階段」或「保存狀態」。

功能一:反應使用者的旅程階段

使用者的瀏覽紀錄要能反應其旅程(user’s browser history accurately reflects their journey through your application)。因此,當使用者在服務的不同階段移動時,路由就該變化。比如:

  • 使用者從購物網站的首頁(/)進入某個商品的說明頁(/item/$itemId
  • 使用者決定為購物車(/chart)結帳(/checkout

而以下「沒有開啟新脈絡(前端在背景默默做掉就好)」的操作情境,就不需要改變路由:

  • 使用者對某個商品留下評價
  • 使用者A向使用者B送出好友邀請
  • 使用者對某條貼文按下、收回讚

功能二:保存狀態

如果某狀態需要在畫面重整之間持續,或是在多個裝置、平台間傳遞,那就可以考慮將狀態帶入路由。比如:

  • 讓使用者分享他的設定,比如「購物網站裡屬於品牌X的商品,並以網格模式顯示(/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 的說明段落
  • 不屬於 LocationText fragments 能在不使用帳號系統的情況下,讓使用者分享他的螢光筆標記(參考 Session (computer science) from Google search resultSession (computer science) direct link 這組對比)——但要注意目前 FireFox 還不支援此規格

參考資料