React Router v7にバージョンアップしました

import type { Blocker, History, Transition } from 'history';
import { useCallback, useContext, useEffect, useState } from 'react';
import {
  useLocation,
  useNavigate,
  UNSAFE_NavigationContext as NavigationContext,
} from 'react-router-dom';

const MESSAGE =
  '本当にページを移動してもよろしいですか？入力内容が破棄されます';

export const usePageTransitionBlocker = () => {
  const [shouldBlock, setShouldBlock] = useState(false);

  const navigate = useNavigate();
  const location = useLocation();
  const [lastTransition, setLastTransition] = useState<Transition>();
  const [hasNavigationConfirmed, setHasNavigationConfirmed] = useState(false);

  const handleBlockedNavigation = useCallback<Blocker>(
    (transition) => {
      if (
        !hasNavigationConfirmed &&
        transition.location.pathname !== location.pathname
      ) {
        setLastTransition(transition);
        if (window.confirm(MESSAGE)) {
          setHasNavigationConfirmed(true);
        }

        return false;
      }
    },
    [hasNavigationConfirmed, location.pathname],
  );

  useEffect(() => {
    if (hasNavigationConfirmed && lastTransition) {
      navigate(lastTransition.location.pathname);
    }
  }, [hasNavigationConfirmed, lastTransition, navigate]);

  /** @see https://github.com/remix-run/react-router/issues/8139#issuecomment-954431589 */
  // navigator.block プロパティが型定義上省略されているため as を使用
  // 現在のreact-router実装の内部でblockが使用されていないために消されているだけで、実装上存在している
  const navigator = useContext(NavigationContext).navigator as History;

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

    const unblock = navigator.block((transition) =>
      handleBlockedNavigation({
        ...transition,
        retry: () => {
          unblock();
          transition.retry();
        },
      }),
    );

    return unblock;
  }, [handleBlockedNavigation, navigator, shouldBlock]);

  const onWindowOrTabClose = useCallback(
    (e: BeforeUnloadEvent) => {
      if (!shouldBlock) return;

      e.returnValue = MESSAGE;
      return MESSAGE;
    },
    [shouldBlock],
  );

  useEffect(() => {
    window.addEventListener('beforeunload', onWindowOrTabClose);

    return () => {
      window.removeEventListener('beforeunload', onWindowOrTabClose);
    };
  }, [onWindowOrTabClose]);

  return {
    shouldBlock,
    setShouldBlock,
  };
};

import {useCallback} from 'react';
import {useBeforeUnload, unstable_usePrompt} from 'react-router';

type Options = {
  message: string;
  beforeNavigate?: () => void;
};

export const usePageTransitionBlocker = (
  {message, beforeNavigate}: Options = {
    message: '本当にページを移動してもよろしいですか？入力内容が破棄されます',
  },
) => {
  const [shouldBlock, setShouldBlock] = useState(false);

  // ハードナビゲーション（aタグでの遷移やリロードなどを止める）
  useBeforeUnload(
    useCallback(
      (event) => {
        if (!shouldBlock) {
          return;
        }

        if (window.confirm(message)) {
          if (beforeNavigate !== undefined) {
            beforeNavigate();
          }

          setShouldBlock(false);
        } else {
          event.preventDefault();
          event.returnValue = '';
        }
      },
      [shouldBlock, message, beforeNavigate, setShouldBlock],
    ),
  );

  // ソフトナビゲーション（Linkコンポーネントでの遷移などを止める）
  unstable_usePrompt({
    message,
    when: ({currentLocation, nextLocation}) =>
      shouldBlock && currentLocation.pathname !== nextLocation.pathname,
  });

  return {
    shouldBlock,
    setShouldBlock,
  };
};

// before
export function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path='/'
          element={<TopPage />}
        />
        <Route
          path='/test'
          element={<TestPage />}
        />
      </Routes>
    </BrowserRouter>
  );
}

// after
const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <TopPage />
    },
    {
      path: '/test',
      element: <TestPage />
    }
  ],
  {
    future: {
      v7_fetcherPersist: true,
      v7_normalizeFormMethod: true,
      v7_partialHydration: true,
      v7_relativeSplatPath: true,
      v7_skipActionErrorRevalidation: true,
    },
  },
);

export function Router() {
  return <RouterProvider router={router} />
}

export function Hoge() {
  const navigate = useNavigate();
  const onClick = () => {
-   navigate(-1);
+   void navigate(-1);
  }

  return <button onClick={onClick}>戻る</button>
}