在Next.js中使用react-router-dom实现登录成功后页面跳转报错

报错原因 #

你违反了React Hook的核心规则：Hook只能在React函数组件的顶层作用域，或者自定义Hook的顶层作用域调用，不能在事件处理函数、循环、条件判断内部调用。你的代码里在trigger这个事件处理函数中调用了useNavigate()，这就触发了报错。

修复代码 #

把useNavigate()的调用移到组件的顶层，也就是SignUp函数内部、trigger函数外面：

export default function SignUp() {
  // 将useNavigate移至组件顶层
  const navigate = useNavigate();

  const trigger = async (event: any) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    try {
      const response = await fetchRestEndpoint(`/users`, 'POST', {
        username: data.get("username"),
        email: data.get("email"),
        password: data.get("password"),
        role: "user"
      });
      if (response.ok) {
        const user: any = await response.json();
        console.log(user);
        navigate('/');
      }
    } catch(e) {
      alert(e);
    }
    // 剩余代码...
  }

  // 组件其他逻辑...
}

补充说明 #

React Hook的规则是为了保证组件每次渲染时Hook的调用顺序一致，避免出现状态混乱的问题。所有Hook调用都必须放在组件的最外层，不能嵌套在任何子函数、条件或循环里。

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