React注册组件存储数据后跳转触发Invalid hook call错误求助

错误原因 #

你在saveData异步回调里直接调用Navigate("/SignIn")的写法是错误的。Navigate是React Router提供的React组件，它内部依赖了React Context相关的Hooks，必须在函数组件的渲染流程中使用，不能像普通函数一样在事件回调这类非渲染逻辑里直接调用——这种写法违反了React Hooks的使用规则，导致触发Invalid hook call错误。

解决方案 #

方法一：使用useNavigate钩子（推荐） #

React Router v6提供了useNavigate钩子，专门用于在事件回调或异步逻辑中实现页面跳转：

1. 替换Navigate的导入为useNavigate
2. 在组件内部初始化导航函数
3. 在注册成功的逻辑里调用该函数完成跳转

修改后的核心代码如下：

import React, {useState} from "react";
import { useNavigate } from "react-router-dom"; // 替换原Navigate导入

export default function SignUp(props) {
  const [user,setUser] = useState({
    name:"",email:"",password:""
  });
  const navigate = useNavigate(); // 初始化导航函数

  // ... 省略handleInputs函数

  const saveData =async (e) =>{
     e.preventDefault();
     // ... 省略请求逻辑

     if (data.status === 422 || !data){
       window.alert("Invalid Registration");
       console.log("Invalid Registration");
     } else{
       window.alert("Registration Successfull");
       console.log("Registration Successfull");

       navigate("/SignIn"); // 调用导航函数实现跳转
     }
  }

  // ... 省略组件渲染代码
}

方法二：通过状态控制渲染Navigate组件 #

如果更倾向于用组件方式实现，可以通过状态变量控制是否渲染Navigate组件，让它在组件的渲染流程中执行：

import React, {useState} from "react";
import { Navigate } from "react-router-dom";

export default function SignUp(props) {
  const [user,setUser] = useState({
    name:"",email:"",password:""
  });
  const [shouldRedirect, setShouldRedirect] = useState(false); // 新增重定向状态

  // ... 省略handleInputs函数

  const saveData =async (e) =>{
     e.preventDefault();
     // ... 省略请求逻辑

     if (data.status === 422 || !data){
       window.alert("Invalid Registration");
       console.log("Invalid Registration");
     } else{
       window.alert("Registration Successfull");
       console.log("Registration Successfull");

       setShouldRedirect(true); // 更新状态触发重定向
     }
  }

  // 优先判断是否需要重定向
  if (shouldRedirect) {
    return <Navigate to="/SignIn" />;
  }

  // ... 省略组件渲染代码
}

注意事项 #

• 确保你的React Router版本为v6及以上，v5版本对应的API是useHistory，用法类似但API名称不同。
• 所有React Hooks（包括依赖Hooks的组件）都必须在函数组件的顶层作用域或自定义Hooks中使用，不能在嵌套函数、异步回调或条件判断中调用。

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