title: Using history.block with asynchronous functions/callback/async/await
body: <p>I have a form inside a route, that if there are any validation errors, it should not allow the user to navigate to another route. If there are no validation errors, then allow navigation to another route.</p>
  <p>Below is my current code, which the <code>onBlock</code> function does not work does to its async nature as the functions to submit and then validate the form are asynchronous.</p>
  <h3>FormComponent.js</h3>
  <pre><code>import React, { useState, useEffect, useRef } from &quot;react&quot;;
  import { FieldArray } from &quot;formik&quot;;
  import { useHistory } from &quot;react-router-dom&quot;;
  import * as Yup from &quot;yup&quot;;
  import Form from &quot;./Form&quot;;
  import TextInput from &quot;./TextInput&quot;;
  
  const FormComponent = () =&gt; {
    const history = useHistory();
    const [initialValues, setInitialValues] = useState();
    const [isSubmitted, setIsSubmitted] = useState(false);
    const block = useRef();
  
    const formRef = useRef(null);
  
    const onFormSubmit = async (values) =&gt; {
      setIsSubmitted(true);
    };
  
    const validationSchema = () =&gt; {
      const schema = {
        test: Yup.string().required(&quot;Input is Required&quot;)
      };
      return Yup.object(schema);
    };
  
    const onBlock = () =&gt; {
      const { submitForm, validateForm } = formRef?.current || {};
      // submit form first
      submitForm()
        .then(() =&gt; {
          // then validate form
          validateForm()
            .then(() =&gt; {
              // if form is valid - should navigate to route
              // if form is not valid - should remain on current route
              return formRef?.current.isValid;
            })
            .catch(() =&gt; false);
        })
        .catch(() =&gt; false);
    };
  
    const redirectToPage = () =&gt; {
      history.push(&quot;/other-page&quot;);
    };
  
    useEffect(() =&gt; {
      block.current = history.block(onBlock);
  
      return () =&gt; {
        block.current &amp;&amp; block.current();
      };
    });
  
    useEffect(() =&gt; {
      if (isSubmitted) redirectToPage();
    }, [isSubmitted]);
  
    useEffect(() =&gt; {
      setInitialValues({
        test: &quot;&quot;
      });
    }, []);
  
    return initialValues ? (
      &lt;Form
        initialValues={initialValues}
        onSubmit={onFormSubmit}
        formRef={formRef}
        validationSchema={validationSchema}
      &gt;
        &lt;FieldArray
          name=&quot;formDetails&quot;
          render={(arrayHelpers) =&gt;
            arrayHelpers &amp;&amp; arrayHelpers.form &amp;&amp; arrayHelpers.form.values
              ? (() =&gt; {
                  const { form } = arrayHelpers;
                  formRef.current = form;
                  return (
                    &lt;&gt;
                      &lt;TextInput name=&quot;test&quot; /&gt;
                      &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
                    &lt;/&gt;
                  );
                })()
              : null
          }
        /&gt;
      &lt;/Form&gt;
    ) : null;
  };
  
  export default FormComponent;
  </code></pre>
  <p>If a user tries to submit the form without any value in the input, I would expect that <code>onBlock</code> would return <code>false</code> to block navigation. But this does not seem to work. Simply returning <code>false</code> in the <code>onBlock</code> function does however. So it seems that the <code>history.block</code> function does not accept any callbacks. I have also tried to convert it to an <code>async</code> function and <code>await</code> the <code>submitForm</code> &amp; <code>validateForm</code> functions, but still no joy. Is there a way around this? Any help would be greatly appreciated.</p>
  <p>Here is <a href="https://codesandbox.io/s/thirsty-goldwasser-v0mif?file=/src/FormComponent.js:702-728" rel="nofollow noreferrer">CodeSandbox</a> with an example.</p>