title: Confirming navigation with with custom dialog using setRouteLeaveHook
body: <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>