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

Question

I need to redirect people to the home page after submitting this form. I have ReactRouter setup with homepage as "/" already. Right now form submission works however it just shows you text saying form submission was completed afterwards and does not take you back to homepage.

here is the code for my Form. Thanks.

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

I think you should understand the way how to React Router actually works. I can suggest you to before dig down you should be practice more in a good way. https://reacttraining.com/react-router/web

Follow this link to learn more about react-router. Hopefully it will give you any kind of routing-related answer.