Eu tenho uma configuração de formulário com redux-form e basicamente quero criar um cenário em que, se houver conteúdo preenchido em alguma das entradas do formulário, você tentar sair da página e receber um prompt.

A intenção é cancelar a desmontagem da página ou a navegação da página, se clicaremCancelar. Eu tentei criar um condicional, que se cumprido seria apenasreturn mas ainda sai da página atual.

Provavelmente isso é natural e que ainda não estou a par do fluxo de trabalho de reagir / reagir roteador, mas, por enquanto, alguém seria capaz de explicar a melhor abordagem para isso? Existe algo em geral que me permita parar uma desmontagem se algo não for atendido?

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));