React-Hook-Form提交后React-Router重定向失败问题求助

问题分析 #

你遇到的核心问题是对 React Router v6 的 API 使用错误，以及违反了 React Hook 的调用规则：

• redirect 是 React Router v6 中用于路由 loader/action 的专属 API，不能在组件的事件处理函数（如onSubmit）中直接调用，因此无效果。
• useNavigate 报错是因为你可能在onSubmit函数内部调用了它——React Hook 必须在函数组件的顶层作用域调用，不能嵌套在其他函数、循环或条件语句中。
• props.history 是 React Router v5 的用法，v6 已彻底移除该方式，改用useNavigate钩子，所以你找不到该属性。

正确解决方案 #

步骤1：在组件顶层调用useNavigate #

在Login组件的顶层（任何嵌套函数之外）调用useNavigate钩子，获取导航函数。

步骤2：在onSubmit中使用导航函数完成跳转 #

Axios 请求成功后，调用获取到的navigate函数即可实现无刷新的客户端路由跳转。

修正后的完整代码 #

import axios from "axios";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";

export function Login() {
  // 在组件顶层调用useNavigate，获取导航函数
  const navigate = useNavigate();
  // 解构useForm的核心方法，你之前的代码遗漏了这行
  const { register, handleSubmit } = useForm();

  const onSubmit = async (data) => {
    try {
      console.log(data);
      await axios.post("http://localhost:5000/signup", data);
      // 请求成功后执行重定向
      navigate("/my-route");
    } catch (error) {
      console.error("There was an error!", error);
    }
  };

  return (
    <div>
      <h1>Blah</h1>
      <h4>Signup</h4>
      {/* 修正你之前的笔误：onSubmitSignup改为onSubmit */}
      <form key={1} onSubmit={handleSubmit(onSubmit)}>
        <input
          {...register("email", { required: true, minLength: 1 })}
          placeholder="email"
        />
        <input
          type="password"
          {...register("password", { required: true, minLength: 1 })}
          placeholder="password"
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

额外说明 #

• 你之前的代码还遗漏了useForm的核心方法解构，以及onSubmitSignup的笔误，这些也是导致表单无法正常提交的潜在问题。
• React Hook Form 是受控还是不受控组件和重定向无关，问题完全出在 React Router 的 API 使用方式上。

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