react-router Block Route Change

useBlockRouteChange.ts

import { useEffect } from "react";
import { useHistory } from "react-router-dom";

export const defaultLevelMessage =
  "未保存のデータがあります。ページを離れてもよろしいですか。";

function useBlockRouteChange(
  shouldBlock: boolean,
  message = defaultLevelMessage,
  onLevel?: () => void
) {
  const history = useHistory();

  useEffect(() => {
    if (!shouldBlock) {
      return;
    }

    /**
     * FIXME: in React-Router v6, should confirm this method can be used.
     * https://github.com/remix-run/history/issues/690
     */
    let unblock = history.block(() => {
      const shouldLevel = window.confirm(message);

      if (shouldLevel && typeof onLevel === "function") {
        onLevel();
      }

      return shouldLevel;
    });

    return () => {
      unblock();
    };
  }, [shouldBlock, history, message, onLevel]);
}

export default useBlockRouteChange;