`useBeforeUnload`

这个 Hook 只是对 window.beforeunload 的一个封装。

当用户点击尚未访问过的页面的链接时，Remix 会加载该页面的代码分割模块。如果你在用户会话期间部署，并且你或你的主机从服务器中删除了旧文件（许多主机都会这样做 😭），那么 Remix 对这些模块的请求将会失败。Remix 会自动重新加载到新 URL 的浏览器来恢复。这应该会从服务器以你的应用程序的最新版本重新开始。大多数情况下，这都能正常工作，用户甚至都不知道发生了什么。

在这种情况下，你可能需要在页面上保存重要的应用程序状态（例如保存到浏览器的本地存储中），因为自动页面重载会丢失你拥有的任何状态。

无论是否使用 Remix，这都是一个好习惯。用户可以更改 URL，意外关闭浏览器窗口等。

import { useBeforeUnload } from "@remix-run/react";

function SomeForm() {
  const [state, setState] = React.useState(null);

  // save it off before the automatic page reload
  useBeforeUnload(
    React.useCallback(() => {
      localStorage.stuff = state;
    }, [state])
  );

  // read it in when they return
  React.useEffect(() => {
    if (state === null && localStorage.stuff != null) {
      setState(localStorage.stuff);
    }
  }, [state]);

  return <>{/*... */}</>;
}