`useBeforeUnload`

这个钩子只是围绕 window.onbeforeunload 的一个辅助函数。它可以帮助你在用户离开页面之前将重要的应用程序状态保存到页面上（例如浏览器本地存储）。这样，如果他们返回，你可以恢复任何有状态的信息（恢复表单输入值等）。

import { useBeforeUnload } from "react-router-dom";

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

  // save it off before users navigate away
  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 <>{/*... */}</>;
}