title: Redirect ReactJS
body: <p><a href="https://i.stack.imgur.com/r0IAE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r0IAE.png" alt="Error Message when adding redirect to handleSubmit"></a>I'm trying to figure out how to redirect to a submit confirmation page when someone presses submit on the form. The form is connected to the server in backend and will send an email when the submit button is pressed. If I add an href to the button, the email is not sent. I tried adding a redirect in the end of the handleSubmit function, that gave an error in the screenshot below. Here is my code. Please help me do this!</p>
  
  <p>Thank you!</p>
  
  <pre><code>import React from "react";
  import TextField from "@material-ui/core/TextField";
  import { makeStyles } from '@material-ui/core/styles';
  import SendIcon from '@material-ui/icons/Send';
  import Button from "@material-ui/core/Button";
  import axios from "axios";
  import "./Contact.css";
  import { 
    BrowserRouter as Router, 
    Route,
    Switch, 
    Redirect 
  } from "react-router-dom";
  
  const useStyles = makeStyles((theme) =&gt; ({
    button: {
      margin: theme.spacing(1),
    },
  }));
  
  export default function ContactForm() {
    const classes = useStyles();
  
    const handleSubmit = e =&gt; {
      e.preventDefault();
      const firstName = document.getElementById("firstname").value;
      const lastName = document.getElementById("lastname").value;
      const email = document.getElementById("email").value;
      const message = document.getElementById("message").value;
  
      axios({
        method: "POST",
        url: "/api/form",
        data: {
          firstName: firstName,
          lastName: lastName,
          email: email,
          message: message
        }
      });
      document.getElementById("contact-form").reset();
      [![enter image description here][1]][1]&lt;Router&gt;
        &lt;Switch&gt;
          &lt;Redirect to="/submit"/&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    };
  
    return (
      &lt;div
        id="contact"
        className="jumbotron jumbotron-fluid min-vh-100 m-0"
      &gt;
        &lt;div className="container container-fluid text-center "&gt;
          &lt;h1&gt; Contact Me &lt;/h1&gt;
          &lt;div
            style={{
              display: "flex",
              justifyContent: "center",
              marginBottom: "20px",
            }}
          &gt;
            &lt;form
              onSubmit={e =&gt; handleSubmit(e)}
              className="contact-form"
              id="contact-form"
              style={{
                backgroundColor: "transparent",
                display: "flex",
                flexDirection: "column",
                padding: "25px",
                borderRadius: "10px"
              }}
            &gt;
              &lt;TextField
                required
                label="First Name"
                type="text"
                margin="normal"
                variant="outlined"
                id="firstname"
                placeholder="First name"
              /&gt;
              &lt;TextField
                required
                label="Last Name"
                type="text"
                id="lastname"
                margin="normal"
                variant="outlined"
                placeholder="Last Name"
              /&gt;
              &lt;TextField
                required
                label="Email Address"
                type="email"
                id="email"
                margin="normal"
                variant="outlined"
                placeholder="Email Address"
              /&gt;
              &lt;TextField
                required
                label="Message"
                type="text-area"
                id="message"
                multiline
                margin="normal"
                variant="outlined"
                placeholder="Message"
              /&gt;
              &lt;div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center"
                }}
              &gt;
                &lt;Button
                  variant="outlined"
                  color="primary"
                  size="large"
                  type="submit"
                  style={{ width: "50%", marginTop: "25px" }}
                  className={classes.button}
                  endIcon={&lt;SendIcon /&gt;}
                &gt;
                  Send Message
                &lt;/Button&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>