react-router-navigation-prompt

The <NavigationPrompt/> component is a replacement for the standard React Router <Prompt/>. While <Prompt/> is limited to browser-native alert boxes, <NavigationPrompt/> allows you to render custom UI (like modals or dialogs) to confirm navigation.

Important Considerations:

• Browser Security: For security reasons, browsers may still force a vanilla alert box for certain actions, such as reloading the page, closing the tab/window, or navigating away from the site entirely. In these cases, your custom UI might not be shown.
• History Support: Currently, this component is tested with BrowserHistory. It has known issues with HashHistory.
• Multiple Histories: Like the original React Router <Prompt/>, this component does not work with multiple BrowserHistory instances.
• Function-based when prop: If you pass a function to when, ensure you check that nextLocation and action are defined before using them.

import NavigationPrompt from "react-router-navigation-prompt";

<NavigationPrompt when={this.state.shouldConfirmNavigation}>
  {({ onConfirm, onCancel }) => (
    <ConfirmNavigationModal
      when={true}
      onCancel={onCancel}
      onConfirm={onConfirm}
    />
  )}
</NavigationPrompt>

You can use a function for the when prop to trigger the prompt only under specific conditions, such as when the user is navigating to a path that does not start with the current path. You can also use beforeConfirm to run cleanup logic before the navigation proceeds.

import NavigationPrompt from "react-router-navigation-prompt";
import Modal from "./your-own-code";

<NavigationPrompt
  beforeConfirm={(clb) => this.cleanup(clb)} // call the callback function when finished cleaning up
  renderIfNotActive={true}
  when={(crntLocation, nextLocation, _action) =>
    !nextLocation || !nextLocation.pathname.startsWith(crntLocation.pathname)
  }
>
  {({ isActive, onCancel, onConfirm }) => {
    if (isActive) {
      return (
        <Modal show={true}>
          <div>
            <p>Do you really want to leave?</p>
            <button onClick={onCancel}>Cancel</button>
            <button onClick={onConfirm}>Ok</button>
          </div>
        </Modal>
      );
    }
    return <div>This is probably an anti-pattern but ya know...</div>;
  }}
</NavigationPrompt>;

The <NavigationPrompt/> component accepts the following props:

The NavigationPrompt component accepts the following props:

The NavigationPrompt component is a replacement for the standard React Router Prompt. It allows you to intercept navigation attempts and display custom UI (like a modal) instead of relying on the browser's default dialog.

It uses a render prop pattern to provide the state and control functions needed to build your custom dialog.

Key Props:

• when: A boolean or a function (location, nextLocation, action) => boolean. If true (or the function returns true), navigation is blocked and the prompt is shown.
• history: The history object from react-router-dom (automatically provided if using the default export).
• location: The current location object (automatically provided if using the default export).
• allowGoBack: Boolean. If true, when a user confirms a 'POP' action, the component will call history.goBack() instead of history.push().
• disableNative: Boolean. If true, it prevents the component from attaching a beforeunload listener to the window (useful if you only want to block internal React Router navigation).
• beforeConfirm: A function (callback) => void called when the user clicks 'confirm'. Use this to perform async tasks (like saving data) before proceeding.
• beforeCancel: A function (callback) => void called when the user clicks 'cancel'.
• afterConfirm: A callback function executed after navigation is confirmed.
• afterCancel: A callback function executed after navigation is cancelled.
• renderIfNotActive: A boolean. If true, the children function will still be called even when isActive is false.

<NavigationPrompt when={this.props.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>
  )}
</NavigationPrompt>