Редирект ReactJS

Question

Я пытаюсь выяснить, как перенаправить на страницу подтверждения отправки, когда кто-то нажимает отправить в форме. Форма подключена к серверу в бэкэнде и отправит электронное письмо при нажатии кнопки отправки. Если я добавлю ссылку на кнопку, электронное письмо не будет отправлено. Я попытался добавить перенаправление в конец функции handleSubmit, что привело к ошибке на скриншоте ниже. Вот мой код Пожалуйста, помогите мне сделать это!

Спасибо!

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) => ({
  button: {
    margin: theme.spacing(1),
  },
}));

export default function ContactForm() {
  const classes = useStyles();

  const handleSubmit = e => {
    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]<Router>
      <Switch>
        <Redirect to="/submit"/>
      </Switch>
    </Router>
  };

  return (
    <div
      id="contact"
      className="jumbotron jumbotron-fluid min-vh-100 m-0"
    >
      <div className="container container-fluid text-center ">
        <h1> Contact Me </h1>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            marginBottom: "20px",
          }}
        >
          <form
            onSubmit={e => handleSubmit(e)}
            className="contact-form"
            id="contact-form"
            style={{
              backgroundColor: "transparent",
              display: "flex",
              flexDirection: "column",
              padding: "25px",
              borderRadius: "10px"
            }}
          >
            <TextField
              required
              label="First Name"
              type="text"
              margin="normal"
              variant="outlined"
              id="firstname"
              placeholder="First name"
            />
            <TextField
              required
              label="Last Name"
              type="text"
              id="lastname"
              margin="normal"
              variant="outlined"
              placeholder="Last Name"
            />
            <TextField
              required
              label="Email Address"
              type="email"
              id="email"
              margin="normal"
              variant="outlined"
              placeholder="Email Address"
            />
            <TextField
              required
              label="Message"
              type="text-area"
              id="message"
              multiline
              margin="normal"
              variant="outlined"
              placeholder="Message"
            />
            <div
              style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
              }}
            >
              <Button
                variant="outlined"
                color="primary"
                size="large"
                type="submit"
                style={{ width: "50%", marginTop: "25px" }}
                className={classes.button}
                endIcon={<SendIcon />}
              >
                Send Message
              </Button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

Answer 1

Вместо использования компонента Redirect вы можете использовать useHistory и выполнять следующие действия:

...
import { 
  BrowserRouter as Router, 
  Route,
  Switch, 
  useHistory 
} from "react-router-dom";
...

export default function ContactForm() {
  const history = useHistory()
  ...

  const handleSubmit = e => {
    ...
    history.replace('/submit')
    // or you can use history.push('/submit')
  };

  ...
}

Этот метод намного чище и позволит вам изменить историю программно чем рендеринг компонента Redirect.