React函数组件中React-Bootstrap表单验证通过后实现用户路由跳转的方法

Ah, I see the issue here! Wrapping your submit button with <Link> takes precedence over the form's native submission behavior. When you click the button, React Router triggers the route change right away, skipping all form validation steps entirely. Let's fix that step by step:

Step 1: Remove the <Link> wrapper #

First, get rid of the <Link> component around your submit button. We'll handle navigation programmatically after validation instead—this gives us control over when the redirect happens.

Step 2: Add React Router's useNavigate hook #

Import useNavigate from react-router-dom; this hook lets us trigger route changes manually once validation passes.

Step 3: Attach an onSubmit handler to the Form #

Add an onSubmit event handler to the <Form> component. In this function, we'll:

• Stop the default form reload behavior
• Check if all form inputs meet validation rules
• Only redirect to the target page if validation passes

Modified Code Example #

import { useNavigate } from 'react-router-dom';
import { Form, Button } from 'react-bootstrap';

const SingIn = () => {
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    // Prevent the browser's default form reload
    e.preventDefault();
    
    // Grab the form element from the event
    const form = e.currentTarget;
    
    // Check if all inputs pass validation (triggers native HTML5 validation)
    if (form.checkValidity()) {
      // Validation passed—navigate to the movies page
      navigate('/movies');
    } else {
      // Show native validation feedback for invalid fields
      form.reportValidity();
    }
  };

  return (
    <Form className="SingIn" onSubmit={handleSubmit}>
      <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" required />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" required />
      </Form.Group>
      <Form.Group className="mb-3" controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Check me out" />
      </Form.Group>
      {/* No more Link wrapper—submit button now triggers form validation */}
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
};

How This Works #

• Clicking the submit button now triggers the form's onSubmit event instead of an immediate route jump.
• e.preventDefault() stops the browser from reloading the page (the default form behavior).
• form.checkValidity() verifies all required fields and input formats (like your email field's type validation).
• If valid, navigate('/movies') redirects to your target page.
• If invalid, form.reportValidity() shows the browser's built-in validation messages (e.g., "Please fill out this field") to guide the user.

This ensures the form only redirects after passing all checks—exactly what you need!

内容的提问来源于stack exchange，提问作者Daniyal