title: React Login with Redirect on callback
body: <p>I'm new to react and struggling to redirect the user in a demo app to a default page after they submit the login form. I'm not entirely sure why <code>return &lt;Redirect to="/default" /&gt;;</code> isn't doing anything.</p>
  
  <p><a href="https://codesandbox.io/s/react-login-form-6y8kj" rel="nofollow noreferrer">Code Sandbox</a></p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from "react";
  import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
  import Form from "./Form";
  import Default from "./default";
  
  const App = () =&gt; {
    return (
      &lt;Router&gt;
        &lt;div&gt;
          &lt;Switch&gt;
            &lt;Route path="/default" component={Default} /&gt;
            &lt;Route path="/" component={Form} /&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  };
  
  export default App;
  </code></pre>
  
  <p><strong>Form.jsx</strong></p>
  
  <pre><code>import React from "react";
  import useForm from "./useForm";
  import validate from "./LoginFormValidationRules";
  import { Redirect } from "react-router-dom";
  
  const Form = () =&gt; {
    const { values, errors, handleChange, handleSubmit } = useForm(
      login,
      validate
    );
  
    function login() {
      console.log("logged in");
      return &lt;Redirect to="/default" /&gt;;
    }
  
    return (
      &lt;div className="section is-fullheight"&gt;
        &lt;div className="container"&gt;
          &lt;div className="column is-6 is-offset-3"&gt;
            &lt;div className="box"&gt;
              &lt;form onSubmit={handleSubmit} noValidate&gt;
                &lt;div className="field"&gt;
                  &lt;label className="label"&gt;Email Address&lt;/label&gt;
                  &lt;div className="control"&gt;
                    &lt;input
                      autoComplete="off"
                      className={`input ${errors.email &amp;&amp; "is-danger"}`}
                      type="email"
                      name="email"
                      onChange={handleChange}
                      value={values.email || ""}
                      required
                    /&gt;
                    {errors.email &amp;&amp; (
                      &lt;p className="help is-danger"&gt;{errors.email}&lt;/p&gt;
                    )}
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className="field"&gt;
                  &lt;label className="label"&gt;Password&lt;/label&gt;
                  &lt;div className="control"&gt;
                    &lt;input
                      className={`input ${errors.password &amp;&amp; "is-danger"}`}
                      type="password"
                      name="password"
                      onChange={handleChange}
                      value={values.password || ""}
                      required
                    /&gt;
                  &lt;/div&gt;
                  {errors.password &amp;&amp; (
                    &lt;p className="help is-danger"&gt;{errors.password}&lt;/p&gt;
                  )}
                &lt;/div&gt;
                &lt;button
                  type="submit"
                  className="button is-block is-info is-fullwidth"
                &gt;
                  Login
                &lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Form;
  </code></pre>
  
  <p><strong>useForm.jsx</strong></p>
  
  <pre><code>import { useState, useEffect } from "react";
  
  const useForm = (callback, validate) =&gt; {
    const [values, setValues] = useState({});
    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);
  
    useEffect(() =&gt; {
      if (Object.keys(errors).length === 0 &amp;&amp; isSubmitting) {
        callback();
      }
    }, [errors]);
  
    const handleSubmit = event =&gt; {
      if (event) event.preventDefault();
      setErrors(validate(values));
      setIsSubmitting(true);
    };
  
    const handleChange = event =&gt; {
      event.persist();
      setValues(values =&gt; ({
        ...values,
        [event.target.name]: event.target.value
      }));
    };
  
    return {
      handleChange,
      handleSubmit,
      values,
      errors
    };
  };
  
  export default useForm;
  </code></pre>