通過使用歷史記錄 API 來存儲狀態，在 React 應用中管理頁面狀態。

　　React 中有許多狀態管理庫，例如 Redux、重匹配、反沖，當然，您可以使用 React 上下文來管理頁面狀態。這些都非常有用，但是存在一個問題 - 當我們刷新頁面時，頁面狀態將丟失，并且頁面狀態將不可共享。例如，如果你在 React 應用列表頁中篩選某些數據，并希望與可以直接看到結果的人共享頁面 URL，則無法僅使用狀態管理來實現它。

　　本文將介紹如何使用歷史記錄 API 來增強 React 狀態，以便可以共享狀態，并且在刷新頁面后頁面顯示不會更改。

　　具有網址的持久狀態

　　大多數 npm 模塊使用本地存儲來保存 React 應用程序中的頁面狀態，如還原持久化 — npm (npmjs.com)、使用持久狀態 — npm (npmjs.com)。通過使用localStorage，我們可以存儲復雜數據或大數據，并且在刷新頁面時，我們可以恢復狀態，這對用戶來說是一種更好的體驗，尤其是在移動頁面上。

　　對于大多數列表頁面，我們只需要保留一些狀態的過濾動作，我們就可以使用URL來存儲狀態。假設我們只需要存儲一個字段，我們可以使用這個 React 鉤子：

　　使用鉤子函數后，它將獲取 URL 查詢以初始化篩選器變量，我們可以使用 setData 來存儲狀態，并將狀態存儲為 URL。filter

　　通過使用 URL 來保持狀態，我們可以共享鏈接(CodePen 不會共享，因為它使用 iframe 來呈現結果頁)。

　　結論

　　我們可以使用本地存儲來持久化狀態，也可以使用URL來做到這一點。如果我們需要與某些預設的過濾器/選項共享頁面URL，則使用URL來存儲狀態將很方便。如果狀態數據非常大，我們可以將其保存到后端SQL，并帶有一個可以與其他人共享的短ID。