Tengo una configuración de formulario con redux-form y básicamente quiero crear un escenario en el que si hay contenido completado en alguna de las entradas del formulario e intentas salir de la página, aparece un mensaje.

La intención es cancelar el desmontaje de la página o la navegación de la página si hacen clicCancelar. Traté de crear un condicional, que si se cumpliera soloreturn pero aún se aleja de la página actual.

Esto es probablemente natural y que todavía no conozco el flujo de trabajo de reacción / reacción del enrutador, pero por el momento ¿alguien podría explicar el mejor enfoque para esto? ¿Hay algo en general que me permita detener un desmontaje si algo no está satisfecho?

import { reduxForm } from 'redux-form';

class Form extends Component {
  componentWillUnmount() {
    if (!this.props.pristine && !confirm('Are you sure you want to navigate away from this page?')) {
      return;
    }
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <form onSubmit={ handleSubmit(this.props.onSubmit) }>
        ...
      </form>
    );
  }
}

...

export default connect(mapStateToProps, null)(reduxForm({
  form: 'Form',
  enableReinitialize: true,
  validate
})(Form));