在React中提交表单后如何重定向？

Question

提交此表格后，我需要将人们重定向到首页。我已经将ReactRouter设置为主页“ /”。目前，表单提交有效，但是它仅显示文本，表明表单提交已完成，并没有带您回到首页。

这是我的表格的代码。谢谢。

import React from 'react'
import './ReportUs.css'


export class ReportUs extends React.Component {
    render() {

        return ( 



            <div>
                <nav></nav>

        <title>Contact V2</title>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        {/*===============================================================================================*/}
        <link rel="icon" type="image/png" href="images/icons/favicon.ico" />
        {/*===============================================================================================*/}
        <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
        {/*===============================================================================================*/}
        <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css" />
        {/*===============================================================================================*/}
        <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css" />
        {/*===============================================================================================*/}
        <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css" />
        {/*===============================================================================================*/}
        <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css" />
        {/*===============================================================================================*/}
        <link rel="stylesheet" type="text/css" href="css/util.css" />
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        {/*===============================================================================================*/}
        <div className="bg-contact2" style={{backgroundImage: 'url("images/bg-01.jpg")'}}>
          <div className="container-contact2">
            <div className="wrap-contact2">
              <form className="gform pure-form pure-form-stacked" method="POST" data-email="[email protected]" action="https://script.google.com/macros/s/AKfycbxalVVtv6F-fMSwhiXQmHmW-BE96jnq1-dH5X9C/exec">
                <span className="contact2-form-title">
                  Report Content
                </span>
                <div className="wrap-input2 validate-input" data-validate="Name is required">
                  <input className="input2" type="text" name="name" />
                  <span className="focus-input2" data-placeholder="NAME" />
                </div>
                <div className="wrap-input2 validate-input" data-validate="Valid email is required: [email protected]">
                  <input className="input2" type="text" name="email" />
                  <span className="focus-input2" data-placeholder="EMAIL" />
                </div>
                <div className="wrap-input2 validate-input" data-validate="Message is required">
                  <textarea className="input2" name="message" defaultValue={""} />
                  <span className="focus-input2" data-placeholder="MESSAGE" />
                </div>
                <div className="container-contact2-form-btn">
                  <div className="wrap-contact2-form-btn">
                    <div className="contact2-form-bgbtn" />
                    <button className="contact2-form-btn">
                      Report
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>

      </div>
        )

    }


}

export default ReportUs;

Answer 1

我认为您应该了解React Router实际工作方式。我可以建议您在深入研究之前应该多练习一些好方法。 https://reacttraining.com/react-router/web

点击此链接可了解更多有关react-router的信息。希望它会给您任何与路由相关的答案。