Alternative for Prompt in React Router V6

I have a solution to this problem

It's a hook that prompts the user that they are about to lose the changes, and asks if they want to proceed.

The hook needs two files: useNavigatingAway.js and NavigationBlocker.js which are based on useLocation, useNavigation, and UNSAFE_NavigationContext; this last one was provided by the people that developed React Router and gives us the alternative to make these kinds of things.

The original article is https://dev.to/bangash1996/detecting-user-leaving-page-with-react-router-dom-v602-33ni, but I changed the names and made it more understandable. I also wrote my version in javascript.

The dialog and menu were developed using MUI, and it's based on React Router Dom 6

Rafael

Meanwhile, try this package I published https://www.npmjs.com/package/react-router-prompt

You can achieve something similar to <Prompt /> we had in v5

<ReactRouterPrompt when={isDirty}>
  {({ isActive, onConfirm, onCancel }) => (
    <Modal show={isActive}>
      <div>
        <p>Do you really want to leave?</p>
        <button onClick={onCancel}>Cancel</button>
        <button onClick={onConfirm}>Ok</button>
      </div>
    </Modal>
  )}
</ReactRouterPrompt>

Where: isDirty => variable which stores if form is dirty

When isDirty is true: it returns variable isActive, onConfirm, onCancel which can be used by Modal, Dialog or custom prompt component.

isActive => when user tries to navigate to different route, this is active and so prompt shall be visible

onConfirm => callback to navigate allow user to different route.

onCancel => callback to stop user to navigate to different route

Let me know if this helps.