提交表单后直接对“谢谢”页面做出反应

Question

我做了一个简单的表单，在我点击表单的提交按钮后，我希望它自动重定向到我设置的“谢谢”页面。 谁能帮我解决这个问题。 目前，这就是我认为它可能工作的方式，但它不断弹出错误。 非常感谢。

const handleSubmit = event => {
    alert("Thank you for registering ");
    event.preventDefault();
    event.stopPropagation();
    handleClose();
    redirectToPage();
};
const redirectToPage = () => redirect(true);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

if (redirect) {
    return <Link to="/thankyou" />
}
return (
  <>
        <div className="StudentForm">
            <Modal show={show} onHide={handleClose} animation={true}>
                <Modal.Header closeButton>
                    <Modal.Title>Student Information</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form onSubmit={handleSubmit}>
                        <Row>
                            <Col>
                                <Form.Group controlId="std_name">
                                    <Form.Control required type="text" id="std_name" name="std_name"
                                    placeholder="Student Name" />
                                </Form.Group>
                            </Col>
                        </Row>
                        <Button variant="secondary" onClick={event =>  window.location.href='/home'}>Cancel</Button>
                        <Button variant="primary" type="submit">
                            Submit
                        </Button>
                    </Form>
                </Modal.Body>
            </Modal>
        </div>
  </>
);

Answer 1

您想使用react-router-dom Redirect ，我建议使用useState hook 来维护一个状态变量，该变量将确定何时重定向，而在redirectToPage您只需将其设置为true

import React,{Fragment,useState} from "react"; 
import { Redirect } from "react-router-dom";

const [redirect, setRedirect] = useState(false);

const redirectToPage = () => setRedirect(true) ;  

return (

      {redirect && (
        <Fragment>
          <Redirect to='/thankyou' />  
        </Fragment>
       )}    
       <div className="StudentForm">
       // Rest of Code
  );