reactjs - 在 react 中提交表单后重定向到网站

Question

我知道这个问题已经被问了一百万次，尽管我仍然很难将答案转移到我的案例中。对于更有经验的人来说，答案可能是微不足道的。我对 react 非常陌生。我想在表单成功提交后重定向到“/”。我尝试相应地修改handleSubmit，但我的所有尝试都没有成功。问题是用户不知道消息已经发送并且提交后消息仍然在表单中。所以，我只想重定向到根目录。

这是我的组件:

import React from "react";
import { ChatIcon } from "@heroicons/react/solid";
import { useHistory } from "react-router-dom";

export default function Contact() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [message, setMessage] = React.useState("");
  const history = useHistory() 
  
  function encode(data) {
    return Object.keys(data)
      .map(
        (key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
      )
      .join("&");
  }

  function handleSubmit(e) {
    e.preventDefault();
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", name, email, message }),
    })
      .then(() => {
        console.log('Email sent');
        history.push('/');
      })
      .catch((error) => console.log(error));
  }

  return (
    <section id="contact" className="relative">
      <div className="container px-5 pt-20 pb-0 mx-auto text-center">
      <ChatIcon className="w-10 inline-block mb-4" />

        <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-4">
              Get in touch
        </h1>
        <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
            You have ideas about collaborations or questions about my latest projects? Feel free to reach out!<br/> I am happy to talk. 
        </p>        
      </div>
      <div className="container px-5 pb-10 mx-auto flex sm:flex-nowrap flex-wrap">
        <form
          netlify
          data-netlify-recaptcha="true"
          data-netlify="true"
          netlify-honeypot="bot-field"
          name="contact"
          onSubmit={handleSubmit}
          className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
          
          <input type="hidden" name="form-name" value="contact" />

          <div className="relative mb-4">
            <label htmlFor="name" className="leading-7 text-sm text-gray-400">
              Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setName(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label htmlFor="email" className="leading-7 text-sm text-gray-400">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="message"
              className="leading-7 text-sm text-gray-400">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
              onChange={(e) => setMessage(e.target.value)}
            />
          </div>
          <div data-netlify-recaptcha="true" class="form-row"></div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Submit
          </button>
        </form>

        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:ml-10 p-10 flex items-end justify-start relative mt-10">
          <iframe
            width="100%"
            height="100%"
            title="map"
            className="absolute inset-0"
            frameBorder={0}
            marginHeight={0}
            marginWidth={0}
            style={{ filter: "opacity(0.7)" }}
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109162.25531026715!2d-114.16629014851806!3d51.041178754239546!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x53717db7481cb3b1%3A0x36aff4a9e3c803fb!2sUniversity%20of%20Calgary!5e0!3m2!1sen!2sca!4v1629156439590!5m2!1sen!2sca"
          />
          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
            <div className="lg:w-1/2 px-6">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                ADDRESS
              </h2>
              <p className="mt-1">
                2500 University Dr NW, T2N 1N4, Calgary, AB, Canada
              </p>
            </div>
            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                EMAIL
              </h2>
              <a className="text-indigo-400 leading-relaxed" href='mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c2c6d0d2dad4c3f1c4d2d0ddd6d0c3c89fd2d0" rel="noreferrer noopener nofollow">[email protected]</a>'>
                <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfccc8dedcd4dacdffcadcded3d8decdc691dcde" rel="noreferrer noopener nofollow">[email protected]</a>
              </a>
              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                LINKED IN
              </h2>
              <p className="leading-relaxed"><a href='https://www.linkedin.com/in/sorenwacker/'>sorenwacker</a>   </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

我找到了使用浏览器历史记录、Redirect 和 redirect 变量的解决方案。不过，我不确定什么是最好的方法。

Answer 1

从react-router-dom中，您可以导入钩子(Hook)useHistory。然后做这样的事情:

const history = useHistory();

const handleSubmit = (e) => {
    // your submit logic ...

    history.push("/");
}