在单页应用程序（SPA）开发中，React Router 分为两种路由实现方式：Browser Router 和 Hash Router。其中 Browser Router 需要使用服务器端支持，而 Hash Router 通过 URL 中的哈希值实现路由，不需要服务器端支持，因此使用 Hash Router 的 SPA 在刷新页面后状态不会丢失。本文将介绍如何使用 Hash Router 解决 React Router 刷新 SPA 页面后状态丢失的问题。
什么是 Hash 路由
Hash 路由是一种通过 URL 的哈希值实现页面路由的方式，一般用于 SPA 的开发中。Hash 路由使用 URL 中的哈希值（#）来表示不同的页面状态，而不是通过 URL 路径来实现。因为哈希值变化不会触发页面刷新，因此 SPA 在使用 Hash 路由时，刷新页面后状态不会丢失。
React Router 使用 Hash 路由
React Router 支持使用 Hash 路由，只需要使用 HashRouter 替换 BrowserRouter 即可。例如：
-- -------------------- ---- -------
------ - ----------- ------ ---- - ---- -------------------
-------- ----- -
------ -
------------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
-------------
--
-
可以看到，在使用 HashRouter 的情况下，每个链接都有一个哈希值，点击链接后 URL 中的哈希值会改变，但页面不会刷新，React Router 会根据哈希值来加载不同的组件。
解决 React Router 刷新页面后状态丢失的问题
在使用 Hash 路由时，React Router 刷新页面后状态不会丢失，但是当用户在 URL 中手动输入哈希值时，React Router 还是无法恢复之前的状态。为了解决这个问题，我们可以在应用程序加载时进行一次判断，判断当前的 URL 是否带有哈希值，如果带有哈希值则手动触发路由切换，以恢复之前的状态。例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- ------ ----- ------------ ---------- - ---- -------------------
-------- ----- -
----- -------- - --------------
----- ------- - -------------
------------ -- -
-- ---------------- -
---------------------
-
-- ------------
------ -
------------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
-------------
--
-
-------- ------ -
------ -
-----
-------------
------
--
-
-------- ------- -
------ -
-----
--------------
------
--
-
-------- --------- -
------ -
-----
----------------
------
--
-
可以看到，在 App 组件中，我们使用了 useEffect 和 useHistory Hook 监听 URL 的变化，如果 URL 中没有哈希值，则将页面重定向到默认路由。这样，在用户手动输入 URL 地址时，React Router 也能自动恢复之前的状态。
示例代码
完整的使用 Hash 路由解决 React Router 刷新页面后状态丢失的问题的代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- ------ ----- ------------ ---------- - ---- -------------------
-------- ----- -
----- -------- - --------------
----- ------- - -------------
------------ -- -
-- ---------------- -
---------------------
-
-- ------------
------ -
------------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
-------------
--
-
-------- ------ -
------ -
-----
-------------
------
--
-
-------- ------- -
------ -
-----
--------------
------
--
-
-------- --------- -
------ -
-----
----------------
------
--
-
------ ------- ----
总结
本文介绍了如何使用 Hash 路由解决 React Router 刷新 SPA 页面后状态丢失的问题。我们了解了什么是 Hash 路由，以及如何使用 HashRouter 替换 BrowserRouter。同时，我们还介绍了如何使用 useEffect 和 useHistory Hook 监听 URL 的变化，以恢复之前的状态。希望本文对大家在 React Router 开发中遇到的问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645746d0968c7c53b0a0c5b3