`useBeforeUnload`

此钩子只是围绕 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 <>{/*... */}</>;
}