Custom dialog with react-router v4

CustomDialogExample.js

// -------------------------------------
//   Example from react-router
//   @ref https://reacttraining.com/react-router/web/example/preventing-transitions
// -------------------------------------

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

import Form from './Form';
import getUserConfirmation from './get_user_confirmation';

const CustomDialogExample = () => (
  <Router getUserConfirmation={getUserConfirmation}>
    <div>
      <ul>
        <li><Link to="/">Form</Link></li>
        <li><Link to="/one">One</Link></li>
        <li><Link to="/two">Two</Link></li>
      </ul>
      <Route path="/" exact component={Form}/>
      <Route path="/one" render={() => <h3>One</h3>}/>
      <Route path="/two" render={() => <h3>Two</h3>}/>
    </div>
  </Router>
);

export default CustomDialogExample;

Form.js

import React, { PureComponent } from 'react';
import { Prompt } from 'react-router-dom';

class Form extends PureComponent {
  state = {
    isBlocking: false
  }

  render() {
    const { isBlocking } = this.state;

    return (
      <form
        onSubmit={event => {
          event.preventDefault();
          event.target.reset();
          this.setState({
            isBlocking: false
          });
        }}
      >
        <Prompt
          when={isBlocking}
          message={location => (
            `Are you sure you want to go to ${location.pathname}`
          )}
        />

        <p>
          Blocking? {isBlocking ? 'Yes, click a link or the back button' : 'Nope'}
        </p>

        <p>
          <input
            size="50"
            placeholder="type something to block transitions"
            onChange={event => {
              this.setState({
                isBlocking: event.target.value.length > 0
              })
            }}
          />
        </p>

        <p>
          <button>Submit to stop blocking</button>
        </p>
      </form>
    );
  }
}

export default Form;

get_user_confirmation.js

import React from 'react';
import { unmountComponentAtNode, render } from 'react-dom';

// Try to use your component
import ConfirmPopup from 'GET_UR_OWN_COMP/ConfirmPopup';

/**
 * Custom confirm dialog with <ConfirmPopup>
 *
 * @param {String}   message
 * @param {Function} callback
 */
function getUserConfirmation(message, callback) {
    // Create a temporary modal DOM element
    const modal = document.createElement('div');
    document.body.appendChild(modal);

    const allowTransition = (answer) => () => {
        // Unmount and remove modal DOM
        unmountComponentAtNode(modal);
        document.body.removeChild(modal);

        callback(answer);
    };

    const confirmPopup = (
        <ConfirmPopup
            message={message}
            onConfirm={allowTransition(true)}
            onClose={allowTransition(false)} />
    );

    render(confirmPopup, modal);
}

export default getUserConfirmation;