How to make a custom Prompt (using getUserConfirmation) for React Router v4

App.jsx

// use Prompt like normal... magic happens in getUserConfirmation
class App extends Component {
  render () {
    return (
      <Router getUserConfirmation={getUserConfirmation}>
        {...}
        <Prompt
          when={formIsHalfFilledOut}
          message="Are you sure you want to leave?" 
        />
      </Router>
    )
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('root')
)

getUserConfirmation.jsx

// default behavior uses window.confirm
const getUserConfirmation = (message, callback) => {
  
  const modal = document.createElement('div')
  document.body.appendChild(modal)
  
  const withCleanup = (answer) => {
    ReactDOM.unmountComponentAtNode(modal)
    document.body.removeChild(modal)
    callback(answer)
  }
  
  ReactDOM.render(
    <UserConfirmation
      message={message}
      onCancel={() => withCleanup(false)}
      onConfirm={() => withCleanup(true)}
    />,
    modal
  )
}

how this getUserConfirmation work? Will it not let the user redirect to any other URL, if callback(false) is returned?

@thekoolfunda
getUserConfirmation prevent of changing URL address, but at the moment of showing confirm dialog the URL adress has already changed to the next URL and after callback(false) the URL returns to the privious state.

A lot of colleagues asked me to tell them how it works and i created a demo and short video with explanations, may be it will be usefull for someone too:

EN: https://youtu.be/ZE5I9RbMaGY
RU: https://youtu.be/qDJ2OMcz8is