Show custom dialog setRouteLeaveHook or history.listenBefore react-router/redux?
<p>I cant seem to figure out how to show a custom dialogue instead of using the normal <code>window.confirm</code> that <code>routeWillLeave</code> and <code>history.listenBefore</code> uses. Basically i have built a notification system and check if a form is dirty <code>const { dispatch, history, dirty } = this.props;</code></p>

<p>if the form is dirty it means the user has unsaved changes. If they change route I would like to show my notification which will have two buttons <code>STAY</code>, <code>IGNORE</code> which can both take an onClick handler.</p>

<p>Ive spent a bit of time googling and havent come across any mention of how i might accomplish this using <code>routeWillLeave</code>. The closest thing i could find was to use <code>history.listenBefore</code> however there docs say that I need to do this.</p>

<pre><code>let history = createHistory({
  getUserConfirmation(message, callback) {
    callback(window.confirm(message)) // The default behavior
  }
})
</code></pre>

<p>But I am using browserHistory from react-router to initiate my store <code>const history = syncHistoryWithStore(browserHistory, store);</code></p>

<p>How can I stop a route change after a link has been clicked, show a notification using my custom notification system and depending on which button is clicked either transition to the new route or stay?</p>

<p>Here is an example of how my notification system works and the direction ive headed in which obviously doesn't work because all this returns is a string to show in the window.confirm dialogue by default.</p>

<pre><code>history.listenBefore((location) =&gt; {
  if(this.props.dirty){
    const acceptBtn = {
      title: 'STAY',
      handler: ignoreRouteChange() //This can be any function I want
    }
    const denyBtn = {
      title: 'IGNORE',
      handler: continueRouteChange() //This can be any function I want
    }
    return dispatch(addNotification({
      message: 'You have unsaved changes!',
      type: NOTIFICATION_TYPE_WARNING,
      duration: 0,
      canDismiss: false,
      acceptBtn,
      denyBtn
    }));
    return "Usaved changes!"
  }
});
</code></pre>

<p>Thanks</p>