Upgrading react-router-dom

[saomartinho]

Issue Summary

After upgrading react-router-dom from version 6.3.0 to 6.26.2, our custom useBlocker hook no longer functions as expected when using BrowserRouter. The primary issues are:

• the new useBlocker does not work with BrowserRouter in v6.26.2.
• The custom blocker implementation does not prevent navigation when the user presses the back button or long-presses the back button and selects a different page.

Current Behavior

In react-router-dom v6.3.0, we used BrowserRouter along with a custom useBlocker implementation, inspired by the community solution on GitHub issue #8139 and this Stack Overflow thread.

Previous Code Sample

Here's the previous code for useBlocker:

import { Action, History, Transition } from 'history';
import { noop } from 'lodash';
import { useCallback, useContext, useLayoutEffect } from 'react';
import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom';

import { useConfirmationDialog } from '../../../hooks/dialog/DialogHooks';
import { hasKey } from '../../../utilities/utilities';

type ExtendNavigationContext = Omit<typeof NavigationContext, 'navigator'> & {
  navigator: Navigator & Pick<History, 'block'>;
};

export function useBlocker({ blocker, skip }: { blocker: (transition: Transition) => void; skip?: boolean }) {
  const { navigator } = useContext(NavigationContext as unknown as React.Context<ExtendNavigationContext>);

  useLayoutEffect(() => {
    if (skip) {
      return noop;
    }

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

    return unblock;
  }, [navigator, blocker, skip]);
}

export function useLocationLock() {
  const [confirm, ref] = useConfirmationDialog();
  const blocker = useCallback(
    ({ action, location: { state }, retry }: Transition) => {
      const force = !!(state && typeof state === 'object' && hasKey(state, 'force') && state.force);
      void confirm({ autoConfirm: force || action === Action.Replace, onConfirm: retry });
    },
    [confirm]
  );

  return { blocker, ref };
}

This code successfully blocked navigations based on the user's confirmation status.

New Code to Replicate the Behavior

The following code was implemented to replicate useBlocker functionality after upgrading to v6.26.2:

import { useCallback, useContext, useEffect as useLayoutEffect, useState } from 'react';
import {
  Location,
  UNSAFE_NavigationContext as NavigationContext,
  Navigator,
  useLocation,
  useNavigate,
} from 'react-router-dom';

import { useConfirmationDialog } from '../../../hooks/dialog/DialogHooks';
import { hasKey, type ObjectValues } from '../../../utilities/utilities';

const actions = {
  pop: 'POP',
  push: 'PUSH',
  replace: 'REPLACE',
} as const;

type Action = ObjectValues<typeof actions>;

type ExtendNavigationContext = Omit<typeof NavigationContext, 'navigator'> & {
  navigator: Navigator & {
    action: Action;
    location: Location;
  };
};

interface BlockerParameters {
  action: Action;
  confirmNavigation: () => void;
  state: Location['state'];
}

const FAKE_ROUTE = 'fake-route' as const;

export function useBlocker({ blocker, skip }: { blocker: (params: BlockerParameters) => void; skip?: boolean }) {
  const { navigator } = useContext(NavigationContext as unknown as React.Context<ExtendNavigationContext>);

  useLayoutEffect(() => {
    if (skip) {
      return;
    }

    const originalPush = navigator.push;
    const originalGo = navigator.go;

    const handlePopState = (event: PopStateEvent) => {
      event.preventDefault();

      const confirm = () => originalGo(-1);
      blocker({ action: navigator.action, confirmNavigation: confirm, state: navigator.location.state });
    };

    window.history.pushState(FAKE_ROUTE, document.title, window.location.href);

    addEventListener('popstate', handlePopState);

    navigator.push = (...args: Parameters<typeof originalPush>) => {
      const confirm = () => originalPush(...args);
      blocker({ action: navigator.action, confirmNavigation: confirm, state: navigator.location.state });
    };

    return () => {
      navigator.push = originalPush;
      removeEventListener('popstate', handlePopState);
      if (window.history.state === FAKE_ROUTE) {
        window.history.back();
      }
    };
  }, [navigator, blocker, skip]);
}

export function useLocationLock({ skip = true }: { skip?: boolean }) {
  const [confirm, ref] = useConfirmationDialog();

  const blocker = useCallback(
    ({ action, confirmNavigation, state }: BlockerParameters) => {
      const force = !!(state && typeof state === 'object' && hasKey(state, 'force') && state.force);
      void confirm({ autoConfirm: force || action === actions.replace, onConfirm: confirmNavigation });
    },
    [confirm]
  );

  useBlocker({ blocker, skip });

  return { blocker, ref };
}

Issue Details

In this updated setup:

• The useBlocker functionality works partially but does not prevent navigation when the user presses the browser back button or long-presses the back button and chooses a different page to return to.
• The BrowserRouter setup appears to have limitations with useBlocker in the updated react-router-dom version.

Expected Behavior

We need the useBlocker implementation to:

• Intercept navigation, including browser back/forward actions, long-pressing the back button, and selecting a different route.
• Prompt the user for confirmation before navigating away.

Request

Could you provide guidance on:

• Alternative approaches or workarounds to achieve the above behavior reliably in v6.26.2.

Any assistance or insight would be greatly appreciated.