useAsyncBlocker for react-router v6.7+

useAsyncBlocker.ts

import { useCallback, useRef } from 'react';
import { unstable_useBlocker as useBlocker, useBeforeUnload, useNavigate } from 'react-router-dom';

function useAsyncBlocker(isBlockFn: () => Promise<boolean>) {
  const navigate = useNavigate();

  const isBlockRef = useRef(true);
  const blockerArgsRef = useRef<Parameters<Exclude<Parameters<typeof useBlocker>[0], boolean>>[0]>();

  const willBlock = useCallback(async () => {
    const isBlock = await isBlockFn();
    isBlockRef.current = isBlock;
    if (!isBlock) {
      const { nextLocation, historyAction } = blockerArgsRef.current!;
      if (historyAction === 'POP') {
        navigate(-1);
      } else {
        navigate(nextLocation, { replace: historyAction === 'REPLACE' });
      }
    }
  }, [isBlockFn, navigate]);

  useBlocker((args) => {
    blockerArgsRef.current = args;
    willBlock();
    return isBlockRef.current;
  });

  useBeforeUnload((event) => {
    if (isBlockRef.current) {
      event.preventDefault();
      event.returnValue = '';
    }
  });
}

export default useAsyncBlocker;