Confirming navigation with with custom dialog using setRouteLeaveHook
<p>I am trying to use a custom dialog to ask a user for confirmation before navigating away with unsaved data.</p>

<p>Following the <a href="https://github.com/ReactTraining/react-router/blob/master/docs/guides/ConfirmingNavigation.md" rel="nofollow noreferrer">docs</a> I have:</p>

<pre><code>  componentDidMount() {
      this.props.router.setRouteLeaveHook(
        this.props.route,
        this.routerWillLeave
      )
  }
</code></pre>

<p>But instead of </p>

<pre><code>  routerWillLeave(nextLocation) {
    if (!this.props.pristine) {
      return 'You have unsaved information, are you sure you want to leave this page?'

    }
</code></pre>

<p>I have </p>

<pre><code>  routerWillLeave(nextLocation) {
    if (!this.props.pristine) {
        this.setState({open: true})
        this.forceUpdatate() //necessary or else render won't be called to open dialog
    }
</code></pre>

<p>The dialog component I am using comes from <a href="http://www.material-ui.com/#/components/dialog" rel="nofollow noreferrer">material-ui</a> which just expects an <code>open</code> boolean to control the dialog, it also takes a <code>handleCancel</code> and <code>handleContinue</code> methods, but I am not sure how to hook it up with <code>routerWillLeave</code>.</p>

<p>The <code>handleCancel</code> method is simple as it just closes the dialog:</p>

<pre><code>  handleCancel() {
    this.setState({open: false})
  };
</code></pre>

<p>I have wrapped the dialog component in component called <code>Notification</code></p>

<pre><code>export default class Notification extends React.Component {

  render() {

   const { open, handleCancel, handleContinue } = this.props

    const actions = [
      &lt;FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={handleCancel}
      /&gt;,
      &lt;FlatButton
        label="Continue"
        primary={true}
        onTouchTap={handleContinue}
      /&gt;,
    ];

    return (
      &lt;div&gt;
        &lt;Dialog
          actions={actions}
          modal={false}
          open={open}

        &gt;
          You have unsaved data. Discard changes?
        &lt;/Dialog&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>And I can call it from the parent component, I have this in the render method:</p>

<pre><code>&lt;Notification open={open} handleCancel={this.handleCancel} handleContinue={this.handleContinue}/&gt;
</code></pre>

<p>Basically my question is how can I wire this up with <code>routerWillLeave</code> instead of showing the native browser alert?</p>