javascript - useLocation 钩子(Hook)即使在硬刷新时也能保持状态

Question

在做一个项目时，我注意到 useLocation 的奇怪行为。我找不到解释的钩子(Hook)。
我有一个按钮，单击它会将您重定向到 EditOrder页面并将传递一个状态:

const navigate = useNavigate();

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

在 EditOrder我用 UseEffect 查看的页面钩子(Hook)如果 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 和本地存储，但在那里找不到状态数据。
有人可以解释为什么会发生这种情况以及如何保存状态数据吗？
编辑:
这是 youtube video这表明了这种行为。
视频代码见 this sandbox ，当您在沙盒上运行代码时，它会正常运行，刷新时所有状态都会重置，但是在本地运行时会出现此问题(在 2 台不同的计算机上)。
A git repo about location.state

Answer 1

React 的使用位置 is based在 history library ，它使用 BrowserHistory在网络应用程序中。
Some browsers ，和 Chrome 一样，坚持 BrowserHistory session 之间的状态，而其他(如 Firefox)则没有。
这可能就是您在本地看到这种行为但在沙盒中没有看到的原因。 CodeSandbox 的浏览器似乎在刷新时清除了历史状态。这也是为什么如果您将 URL 复制到另一个选项卡中，重定向会起作用的原因。 BrowserHistory是单个选项卡的本地。
简而言之，这是预期的行为。您需要手动清除历史状态或将应用程序状态存储在其他位置(useContext 如果您希望跨页面而不是刷新时保持不变，这可能是一个不错的选择)。