2022 第7週 實作筆記:在離開路由前顯示確認視窗

總結

本篇筆記記錄如何使用 react-router-dom (v5) 的 useHistory() 與 Web API beforeunload event 在以下時間點跳出確認訊息:

leave prompt

原始碼:https://github.com/tzynwang/react-router-block/tree/version/2

版本

react-router-dom: 5.3.0
webpack: 5.69.0

筆記

useBlock

無條件阻擋:About 元件

直接在元件中呼叫 useBlock(),並傳入空物件(不需解除條件)

有條件阻擋:Form 元件

傳入 useState 變數 block,在使用者按下送出表單的按鈕時,將 block 設定為 false,並在畫面重新整理(元件重新掛載到畫面上後),重設 block 為 true 避免 F5 後阻擋失效

webpack devServer 設定

參考文件