Я хочу, чтобы страница перенаправлялась на другую страницу только после успешной проверки

я хочу, чтобы страница перенаправлялась на другую страницу только тогда, когда проверка прошла успешно, форма показывает правильную проверку, когда маршрут кнопки не добавлен, но когда я добавляю маршрут, это не так. Итак, какое условие я должен был написать при нажатии кнопки перед маршрутизацией.

код выглядит следующим образом:

import React,{ useState } from 'react'
import { useHistory } from 'react-router-dom'

function Form() {
    const history = useHistory()
    const [firstName,setFirstName] = useState("")
    const [lastName,setLastName] = useState("")
    const [email,setEmail] = useState("")

    const [firstNameErr,setFirstNameErr] = useState({})
    const [lastNameErr,setLastNameErr] = useState({})
    const [emailErr,setEmailErr] = useState({})

    const onSubmit = (e) => {
        e.preventDefault();
        const isValid = formValidation();
    }

    const formValidation = () => {
        const firstNameErr = {};
        const lastNameErr = {}
        const emailErr = {}
        let isValid = true;

        if (firstName.trim().length < 5) {
            firstNameErr.firstNameShort = "first name is short";
            isValid = false;
        }

        if (!lastName.includes("123")) {
            lastNameErr.lastName123 = "Last name must have 123";
            isValid = false;
        }

        if (!email.includes("@")) {
            emailErr.emailerror = "email must have @ character";
        }

        setFirstNameErr(firstNameErr);
        setLastNameErr(lastNameErr);
        setEmailErr(emailErr);
        return isValid;
    }


    return (
        
            <form onSubmit = {onSubmit}>
                <label> First Name: </label>
                <input type = "text"
                value = {firstName}
                onChange = {(e)=> {setFirstName(e.target.value)}}/>
                <br/>
                {Object.keys(firstNameErr).map((key)=>{
  return <div style = {{color: "red"}}>{firstNameErr[key]}</div>
                })}
                <label> Last Name: </label>
                <input type = "text"
                value = {lastName}
                onChange = {(e)=> {setLastName(e.target.value)}}/>
                <br/>
                {Object.keys(lastNameErr).map((key)=>{
  return <div style = {{color: "red"}}>{lastNameErr[key]}</div>
                })}
                <br/>
                <label> email: </label>
                <input type = "email"
                value = {email}
                onChange = {(e)=> {setEmail(e.target.value)}}/>
                <br/>
                {Object.keys(emailErr).map((key)=>{
  return <div style = {{color: "red"}}>{emailErr[key]}</div>
                })}
                <button type = "submit" onClick = {() => history.push('/myvehicles')}>Submit</button>

                </form>      
    )
}

export default Form

так что код выше, как я могу направить на мою страницу транспортных средств с какой логикой я должен добавить перед отправкой истории?

🤔 А знаете ли вы, что...
С React можно создавать одностраничные приложения (SPA), не перезагружая страницу.