title: How to change pages on form submit with React?
body: <p>I have a registration form set up that is correctly sending data to my back-end on submit, but I can't seem to get the page to change when my handleSubmit function is called. </p>
  
  <p>My <code>register.js</code> component</p>
  
  <pre><code>import React from 'react';
  import useForm from '../form/useForm';
  import {BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
  
  const Register = () =&gt; {
  
      const { values, handleChange, handleSubmit } = useForm({
              name: '',
              email: '',
              password: "",
              password2: ""
          }, register);
  
      function register() {
              alert (
                  "test"
              )
          console.log(values);
      }
  
    return (
              &lt;div className="row mt-5"&gt;
                &lt;div className="col-md-6 m-auto"&gt;
                  &lt;div className="card card-body"&gt;
                    &lt;h1 className="text-center mb-3"&gt;
                      &lt;i className="fas fa-user-plus"&gt;&lt;/i&gt; Register
                    &lt;/h1&gt;
                    &lt;form 
                      action="/users/register"
                      method="POST" 
                      onSubmit={handleSubmit}&gt;
                      &lt;div className="form-group"&gt;
                        &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
                        &lt;input 
                        className="form-control" 
                        type="name" 
                        name="name" 
                        onChange={handleChange} 
                        placeholder="Enter Name"
                        value={values.name} 
                        required /&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                        &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
                        &lt;input 
                        className="form-control" 
                        type="email" 
                        name="email" 
                        onChange={handleChange} 
                        placeholder="Enter Email"
                        value={values.email} 
                        required /&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                        &lt;label htmlFor="email"&gt;Password&lt;/label&gt;
                        &lt;input 
                        className="form-control" 
                        type="password" 
                        name="password" 
                        onChange={handleChange} 
                        placeholder="Create Password"
                        value={values.password} 
                        required /&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                        &lt;label htmlFor="email"&gt;Confirm Password&lt;/label&gt;
                        &lt;input 
                        className="form-control" 
                        type="password" 
                        name="password2" 
                        onChange={handleChange} 
                        placeholder="Confirm Password"
                        value={values.password2} 
                        required /&gt;
                      &lt;/div&gt;
                      &lt;button type="submit" className="btn btn-primary btn-block"&gt;
                        Register
                      &lt;/button&gt;
                    &lt;/form&gt;
                    &lt;p className="lead mt-4"&gt;Have An Account? &lt;a href="/login"&gt;Login&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
    );
  };
  
  export default Register;
  </code></pre>
  
  <p>My <code>useForm.js</code> hook that I'm using to handle the submission</p>
  
  <pre><code>import {useState} from 'react';
  import {useHistory} from "react-router-dom";
  
  const useForm = (initialValues, callback) =&gt; {
  
  const [hasError, setErrors] = useState(false);
  const [values, setValues] = useState(initialValues);
  const history = useHistory();
  
    const handleSubmit = async event =&gt; {
      if (event) event.preventDefault();
      const options = {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(values)
      };
  
      try {
        const response = await fetch("/users/register", options);
        const responseData = await response.json();
        history.push("/");
        if (response.ok) {
          console.log("response ok");
          callback();
        } else {
          console.log("response NOT ok");
          throw new Error(responseData.message);
        }
      } catch (err) {
        console.log(err);
        if (err.response) {
          console.log(err.response.data);
        }
      }
    };
  
    const handleChange = (event) =&gt; {
      event.persist();
      setValues(values =&gt; ({ ...values, [event.target.name]: event.target.value }));
    };
  
    return {
      handleChange,
      handleSubmit,
      values
    }
  };
  
  export default useForm;
  </code></pre>
  
  <p>In the <code>useForm.js hook</code>, I threw <code>history.push("/")</code> in the <code>try</code> block as a test, but it isn't doing anything. What is the best way to handle changing pages on a form submission?</p>