Hacky replacement for history.block()

[puopg]

Just trying to upgrade to React 18, I found myself in this need to upgrade react-router to v6.

I encountered an issue with history.block() no longer existing. And since our app is big, and we use a <BrowserRouter />, im not trying to refactor the entire goddamn app to fit this new model. Anyways, in case someone might find this useful to build off of.

import React, { useContext } from "react";
import { UNSAFE_NavigationContext as NavigationContext, useLocation } from "react-router";

type Props = {
  onNavBlocked: () => void;
  children: React.ReactNode;
};

const NavigationBlocker = (props: Props): React.ReactElement => {
  const navigationContext = useContext(NavigationContext);
  const location = useLocation();

  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  const shouldBlock = (currentLocation, nextLocation) => {
    // IMPLEMENT ME!
    return true;
  };

  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  const handlePush = (...args) => {
    const nextLocation = args[0];

    if (shouldBlock(location, nextLocation)) {
      props.onNavBlocked();
    } else {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      navigationContext.navigator.push(...args);
    }
  };

  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  const handleReplace = (...args) => {
    const nextLocation = args[0];

    if (shouldBlock(location, nextLocation)) {
      props.onNavBlocked();
    } else {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      navigationContext.navigator.replace(...args);
    }
  };

  const modifiedNavigationContext = {
    ...navigationContext,
    navigator: {
      ...navigationContext.navigator,
      push: handlePush,
      replace: handleReplace,
    },
  };

  return (
    <NavigationContext.Provider value={modifiedNavigationContext}>
      {props.children}
    </NavigationContext.Provider>
  );
};

export default NavigationBlocker;

Then anything within this node of the tree will get its routing methods from here. Keep this in mind if you say, pass a route method via props to the component inside. That interacts with whatever the navigation context is from the parent.

Anyways usage:

const MyViewThatWillHaveRoutingBlocked = () => {
  const navigate = useNavigate();

  return (
    <button onClick={() => { navigate("/somewhere"); }}></button>
  );
};

// Parent.tsx
<NavigationBlocker>
   <MyViewThatWillHaveRoutingBlocked />
</NavigationBlocker>

Codesandbox: https://codesandbox.io/p/sandbox/react-router-v6-forked-7lpjr3

I havent yet tested this much, so ill likely edit this post if things change...