使用 React-Hook-Form 提交时重定向

Question

我有一个简单的注册表单并使用react-hook-form和react-router 。 我想在 Axios 发布请求后在onSubmit内重定向。 我做不到，我在网上找不到任何解释原因的东西。

我已经尝试从react-router redirect和useNavigate 。 redirect没有任何反应，我在使用navigate时收到此错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

我发现 Hook-Form 的维护者建议使用props.history.push("./my-route")的帖子，就像在“Step1”中所做的那样。 但这对我不起作用。 我不知道历史是从哪里来的。 唯一有效的是window.location.replace("/my-route")但我根本不喜欢这个解决方案。

有人可以帮助我或解释为什么react-router方法不起作用吗？ 是因为Hook-Form不受控制吗？

我的代码：

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

export function Login() {
  const onSubmit = async (data) => {
    try {
      console.log(data);
      await axios.post("http://localhost:5000/signup", data);
      // window.location.replace("/my-route");
    } catch (error) {
      console.error("There was an error!", error);
    }
  };

 return (
    <div>
      <h1>Blah</h1>
      <h4>Signup</h4>
      <form key={1} onSubmit={handleSubmit(onSubmitSignup)}>
        <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>
  );
}

Answer 1

redirect实用程序 function 仅适用于数据路由器（在`react-router@6.4 中引入）并且仅适用于路由加载程序或操作功能，不适用于 React 组件。

在这种情况下，您应该使用useNavigate挂钩。 React hooks 只能从 React function 组件和 Custom React Hooks 调用，不能在任何回调中调用。 有关详细信息，请参阅挂钩规则。 使用挂钩返回的navigate function 发出命令式重定向。

例子：

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

export function Login() {
  const navigate = useNavigate(); // <-- access navigate function

  const onSubmit = async (data) => {
    try {
      console.log(data);
      await axios.post("http://localhost:5000/signup", data);
      navigate("/my-route", { replace: true }); // <-- redirect
    } catch (error) {
      console.error("There was an error!", error);
    }
  };

 return (
    <div>
      <h1>Blah</h1>
      <h4>Signup</h4>
      <form key={1} onSubmit={handleSubmit(onSubmitSignup)}>
        <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>
  );
}