useBeforeUnload

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 <>{/*... */}</>;
}