使用useNavigate()触发Invalid hook call错误，请求技术帮助

你的代码里存在一个明显错误：没有正确调用useNavigate钩子。你当前只是将useNavigate函数本身赋值给了navigate变量，而没有执行这个钩子来获取实际的导航函数，这直接违反了React Hooks的使用规则，导致了"Invalid hook call"错误。

修正后的代码如下：

import React, { useContext, useEffect } from 'react';
import { useNavigate } from "react-router-dom";

function Recipeitem() {

  // 调用useNavigate钩子获取导航函数
  let navigate = useNavigate();
  const gotoRecipes = ()=>{
    navigate(`/recipe`);
  }

  return (
      <button onClick={()=>{gotoRecipes()}}>Go to Page</button>
  );
}

所有React Hooks都必须以函数调用的方式使用（即后面加()），并且要确保调用位置在函数组件的顶层作用域内，不能在嵌套函数、条件判断或循环中调用，这是保证Hooks正常工作的核心规则。

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