ReactJS表单提交成功后跳转至感谢页的实现方法

核心修改步骤 #

• 导入路由导航钩子
  如果你使用的是react-router-dom v6及以上版本，先在文件顶部导入useNavigate钩子：

  import { useNavigate } from "react-router-dom";
  

• 清理无用代码
  删掉所有和SweetAlert弹窗相关的导入、定义，以及没用的popUpRef引用：

  // 删除这些代码
  import Swal from "sweetalert2";
  import withReactContent from "sweetalert2-react-content";
  
  const MySwal = withReactContent(Swal);
  const alertContent = () => {
    MySwal.fire({
      title: "Congratulations!",
      text: "Your message was successfully send and will back to you soon",
      icon: "success",
      timer: 2000,
      timerProgressBar: true,
      showConfirmButton: false
    });
  };
  
  // 同时删除组件内的这行
  const popUpRef = useRef(null);
  

• 初始化导航实例
  在ContactForm组件内部添加导航钩子实例：

  const ContactForm = () => {
    const [contact, setContact] = useState(INITIAL_STATE);
    const { register, handleSubmit, errors } = useForm();
    // 新增这一行
    const navigate = useNavigate();
  
    // ... 其他原有代码
  };
  

• 替换提交成功逻辑
  在onSubmit函数中，把调用弹窗的alertContent()替换为重定向代码，路径根据你的ThankYou页面路由调整：

  const onSubmit = async (e) => {
    console.log("This is contact form")
    try {
      const url = `${baseUrl}/api/contact`;
      const { name, email, number, subject, text } = contact;
      const payload = { name, email, number, subject, text };
      await axios.post(url, payload);
      console.log(url);
      setContact(INITIAL_STATE);
      // 替换弹窗为页面重定向
      navigate("/thank-you");
    } catch (error) {
      console.log(error);
    }
  };
  

• 清理冗余属性
  按钮上的onSubmit={handleSubmit(onSubmit)}是多余的（form标签已经绑定了提交事件），直接删掉：

  <button type="submit" className="btn btn-primary">
    Send Message{" "}
  </button>
  

修改后的完整代码 #

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import baseUrl from "../../utils/baseUrl";

// Form initial state
const INITIAL_STATE = {
  name: "",
  email: "",
  number: "",
  subject: "",
  text: ""
};

const ContactForm = () => {
  const [contact, setContact] = useState(INITIAL_STATE);
  const { register, handleSubmit, errors } = useForm();
  const navigate = useNavigate();

  const handleChange = (e) => {
    const { name, value } = e.target;
    setContact((prevState) => ({ ...prevState, [name]: value }));
    console.log(contact);
  };

  
  const onSubmit = async (e) => {
    console.log("This is contact form")
    try {
      const url = `${baseUrl}/api/contact`;
      const { name, email, number, subject, text } = contact;
      const payload = { name, email, number, subject, text };
      await axios.post(url, payload);
      console.log(url);
      setContact(INITIAL_STATE);
      // 重定向到ThankYou页面，路径按需调整
      navigate("/thank-you");
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className="contact-form">
      <form id="contactForm" onSubmit={handleSubmit(onSubmit)}>
        <div className="row">
          <div className="col-lg-6 col-md-6">
            <div className="form-group">
              <input
                type="text"
                name="name"
                placeholder="Name"
                className="form-control"
                value={contact.name}
                onChange={handleChange}
                ref={register({ required: true })}
              />
              <div className="invalid-feedback" style={{ display: "block" }}>
                {errors.name && "Please enter your name"}
              </div>
            </div>
          </div>

          <div className="col-lg-6 col-md-6">
            <div className="form-group">
              <input
                type="email"
                name="email"
                placeholder="Your work email"
                className="form-control"
                value={contact.email}
                onChange={handleChange}
                ref={register({ required: true, pattern: /^\S+@\S+$/i })}
              />
              <div className="invalid-feedback" style={{ display: "block" }}>
                {errors.email && "Please enter your email"}
              </div>
            </div>
          </div>

          <div className="col-lg-6 col-md-6">
            <div className="form-group">
              <input
                type="text"
                name="number"
                placeholder="Phone"
                className="form-control"
                value={contact.number}
                onChange={handleChange}
                ref={register({ required: true })}
              />
              <div className="invalid-feedback" style={{ display: "block" }}>
                {errors.number && "Please enter your number"}
              </div>
            </div>
          </div>

          <div className="col-lg-6 col-md-6">
            <div className="form-group">
              <input
                type="text"
                name="subject"
                placeholder="Subject"
                className="form-control"
                value={contact.subject}
                onChange={handleChange}
                ref={register({ required: true })}
              />
              <div className="invalid-feedback" style={{ display: "block" }}>
                {errors.subject && "Please enter your subject"}
              </div>
            </div>
          </div>

          <div className="col-lg-12 col-md-12">
            <div className="form-group">
              <textarea
                name="text"
                cols="30"
                rows="5"
                placeholder="Write your message..."
                className="form-control"
                value={contact.text}
                onChange={handleChange}
                ref={register({ required: true })}
              />
              <div className="invalid-feedback" style={{ display: "block" }}>
                {errors.text && "Write your message"}
              </div>
            </div>
          </div>

          <div className="col-lg-12 col-sm-12">
            <button type="submit" className="btn btn-primary">
              Send Message{" "}
            </button>
          </div>
        </div>
      </form>
    </div>
  );
};

export default ContactForm;

（注：顺便修正了subject字段的错误提示文案，从原有的"Please enter your number"改为了正确的"Please enter your subject"）

内容的提问来源于stack exchange，提问作者Tech World