A replacement component for the react-router `Prompt`.

NavigationPrompt.jsx

import React from 'react';
import {withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';

/**
 * A replacement component for the react-router `Prompt`.
 * Allows for more flexible dialogs.
 *
 * @example
 * <NavigationPrompt when={this.props.isDirty}>
 *   {(isOpen, onConfirm, onCancel) => (
 *     <Modal show={isOpen}>
 *       <div>
 *         <p>Do you really want to leave?</p>
 *         <button onClick={onCancel}>Cancel</button>
 *         <button onClick={onConfirm}>Ok</button>
 *       </div>
 *     </Modal>
 *   )}
 * </NavigationPrompt>
 */
class NavigationPrompt extends React.Component
{
  constructor(props) {
    super(props);
    this.state = {nextLocation: null, openModal: false};
    this.onCancel = this.onCancel.bind(this);
    this.onConfirm = this.onConfirm.bind(this);
  }

  componentDidMount() {
    this.unblock = this.props.history.block((nextLocation) => {
      if (this.props.when) {
        this.setState({
          openModal: true,
          nextLocation: nextLocation
        });
      }
      return !this.props.when;
    });
  }

  componentWillUnmount() {
    this.unblock();
  }

  onCancel() {
    this.setState({nextLocation: null, openModal: false});
  }

  onConfirm() {
    this.navigateToNextLocation();
  }

  navigateToNextLocation() {
    this.unblock();
    this.props.history.push(this.state.nextLocation.pathname);
  }

  render() {
    return (
      <div>
        {this.props.children(this.state.openModal, this.onConfirm, this.onCancel)}
      </div>
    );
  }
}

NavigationPrompt.propTypes = {
  when: PropTypes.bool.isRequired,
  children: PropTypes.func.isRequired,
};

export default withRouter(NavigationPrompt);

When I use my browser's Back button, the modal pops up for a split second and then immediately disappears. Is this something history.block can't handle well?

@akrigline, we have (a little) more info on your issue here

tl;dr: we still don't know what causes it, but it happens with some setups but not others. @cumibulat was able to reproduce when using react-boilerplate but did not reproduce when not using react-boilerplate

FYI to readers, I've published an adaptation of this to npm: https://www.npmjs.com/package/react-router-navigation-prompt

Could You please share any live example of that?

What's wrong with the original Prompt?

@quantuminformation see here: remix-run/react-router#4635