useLocation 挂钩即使在硬刷新时也能保持状态

在做一个项目时，我注意到一个奇怪的行为useLocation我找不到解释的钩子。

我有一个按钮，单击它会将您重定向到EditOrder页面并将传递一个状态：

const navigate = useNavigate();

const handleClick = (data) => {
    navigate("edit-order", {state: {order: data}})
};

In the EditOrder我检查的页面UseEffect钩子如果state已提供，如果未提供，用户将被重定向到不同的页面：

const { state } = useLocation();

const navigate = useNavigate();

useEffect(() => {
    if (!state) {
        navigate("some-page");
    }
}, []);

奇怪的是，当我刷新页面时，我仍然可以访问它，如果我console.log(state.order)即使我重新加载，数据仍然存在ctrl + shift + r状态保持不变，这也会发生在empty cache and hard reload option （在 Chrome 和 Edge 中都尝试过）。

但是当我复制 URL 并将其粘贴到新选项卡中时，我立即被重定向到“某个页面” 和console.log(state)将会呈现null.

我检查了 cookie 和本地存储，但找不到状态数据。

有人可以解释为什么会发生这种情况以及状态数据是如何保存的吗？

Edit:

这里有一个Youtube 视频 https://www.youtube.com/watch?v=oBGyefJpIhY这表明了这种行为。

视频中的代码可以在这个沙箱 https://codesandbox.io/s/location-state-stay-on-hard-refresh-q6bjxn?file=/src/App.js，当您在沙盒上运行代码时，它会按预期运行，刷新时所有状态都会重置，但是在本地运行时会出现此问题（在两台不同的计算机上）。

关于 location.state 的 git 存储库 https://github.com/remix-run/history/blob/main/docs/api-reference.md#locationstate

反应使用位置is based https://reactrouter.com/docs/en/v6/api#location on the 历史图书馆 https://github.com/remix-run/history/blob/main/docs/api-reference.md#location，它使用BrowserHistory在网络应用程序中。

一些浏览器 https://github.com/remix-run/history/issues/557，像Chrome一样，坚持BrowserHistory会话之间的状态，而其他（如 Firefox）则不然。

这可能就是您在本地看到此行为而不是在沙盒中看到此行为的原因。看来 CodeSandbox 的浏览器会在刷新时清除历史记录状态。这也是为什么如果您将 URL 复制到另一个选项卡中，重定向就会起作用。BrowserHistory是单个选项卡的本地内容。

简而言之，这是有意的行为。您需要手动清除历史状态或将应用程序状态存储在其他地方（useContext如果您想跨页面保留，这可能是一个不错的选择，但是not跨越刷新）。