React Router 中不同情況的回上一頁
善用history.state
Jul 12, 2021
在執行公司專案的新需求時，有個需求是「判斷從哪個頁面」跳轉，並在「回上一頁」功能時判斷從哪頁跳轉，執行不同的功能。
history.state可以應用在：「登入」之後跳轉回原本登入前的畫面，或是任何需要在跳轉之後的頁面判斷是從哪頁跳轉過去的情境。
頁面架構
為了比較好理解各別頁面，將每頁都加上router以清楚區分
- 首頁: /
- 頁籤頁面: /page-with-tabs?a=b&c=d
- 目標頁面: /target
首頁
跳轉目標頁連結
使用<Link>的最基本用法 — to即可，像是這樣:
頁籤頁面
跳轉目標頁連結
此連結不只需要指定目標頁面的route，還需要加上state
同場加映取得query params的寫法(就是「?a=b&c=d」這一段，取得a和c的值)
目標頁
回上一頁的連結
跳轉時需判斷history.state，做出不同的跳轉行為
最後看一下從兩個不同頁面跳轉到目標頁，再從目標頁點擊「回上一頁」的比較
- 從頁籤頁面(使用上一頁的功能，所以保有query params):
/page-with-tabs?a=b&c=d - 從首頁(不回到首頁，因此純粹跳轉到該頁面而已):
/page-with-tabs