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

import ConfirmNavigationModal from './your-own-code';

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

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

import Modal from './your-own-code';

<NavigationPrompt
  beforeConfirm={this.cleanup}
  // Children will be rendered even if props.when is falsey and isActive is false:
  renderIfNotActive={true}
  // Confirm navigation if going to a path that does not start with current path:
  when={(crntLocation, 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>