React Hook Form表单提交异常：未跳转到Page2反而重定向至根路径

问题原因分析 #

1. 异步函数返回值无法阻止默认行为：你的onSubmit是异步函数，return false不会生效——异步函数默认返回Promise，浏览器无法识别这个返回值来阻止表单的默认提交动作。
2. history用法可能过时：如果项目使用React Router v6，props.history.push已经被废弃，需要改用useNavigate钩子。
3. 冗余的默认行为阻止代码：React Hook Form的handleSubmit内部已经自动调用了event.preventDefault()，手动重复调用反而可能引发逻辑冲突。

修复方案 #

1. 清理冗余代码 #

修改onSubmit函数，移除不必要的event.preventDefault()和return false：

const onSubmit = async (data) => {
    console.log('OnSubmit', data);
    await checkService(data);
};

2. 替换为React Router v6的useNavigate（若适用） #

如果项目基于React Router v6，替换旧的history.push为useNavigate：

import { useNavigate } from 'react-router-dom';

// 在组件内初始化导航钩子
const navigate = useNavigate();

const checkService = async (data) => {
    const result = await ReactCall.post(url, data); // 注意：将payload替换为表单数据data
    handleResponse(result); 
    if (result.data && result.data.errorFlag === false) {
        navigate("/Page2");
    }
}

3. 确保表单无多余action属性 #

检查表单标签，不要设置action属性，避免浏览器触发默认跳转：

<form ref={formRef} onSubmit={handleSubmit(onSubmit, onError)}>
    {/* 表单内容 */}
</form>

4. 完善服务端错误处理 #

避免服务端验证失败时引发意外跳转，补充错误处理逻辑：

const checkService = async (data) => {
    try {
        const result = await ReactCall.post(url, data);
        handleResponse(result); 
        if (result.data && result.data.errorFlag === false) {
            navigate("/Page2");
        } else {
            // 将服务端错误同步到表单
            setError('name', { 
                type: 'server', 
                message: result.data?.errorMessage || '验证未通过' 
            });
        }
    } catch (err) {
        // 处理请求失败场景
        setError('name', { 
            type: 'server', 
            message: '请求异常，请稍后重试' 
        });
    }
}

完整修复后代码示例 #

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { useNavigate } from 'react-router-dom';

const {register, handleSubmit, setError, formState} = useForm({
    resolver: yupResolver(mySchema),
    mode: "onBlur",
    defaultValues: {name: ''}
});
const {errors, isValid} = formState;
const formRef = useRef();
const navigate = useNavigate();

const onSubmit = async (data) => {
    console.log('OnSubmit', data);
    await checkService(data);
};

const checkService = async (data) => {
    try {
        const result = await ReactCall.post(url, data);
        handleResponse(result); 
        if (result.data && result.data.errorFlag === false) {
            navigate("/Page2");
        } else {
            setError('name', { 
                type: 'server', 
                message: result.data?.errorMessage || '验证未通过' 
            });
        }
    } catch (error) {
        setError('name', { 
            type: 'server', 
            message: '请求异常，请检查网络' 
        });
    }
}

// JSX部分
return (
    <form ref={formRef} onSubmit={handleSubmit(onSubmit, onError)}>
        <Input 
            {...register("name")} 
            inputProps={{maxLength: name.maxLength}}
            error={errors.name?.message}
        />
        <Button
            variant="cta"
            type="submit"
            disabled={!isValid}>
            Continue
        </Button>
    </form>
);

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