在 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="example@email.net" 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: ex@abc.xyz">
                  <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 的更多信息。 希望它会给您任何与路由相关的答案。