React自定义Hook问题：useHistory在外部函数调用报错

错误原因 #

useHistory是React Hook，必须在React函数组件顶层或自定义React Hook顶层调用，不能在普通工具函数内使用——这就是你抽离逻辑到普通函数或不符合规范的Hook时报错的核心原因。

正确封装自定义Hook的方案 #

按照Hook规则创建以use开头的自定义Hook，在Hook内部调用useHistory，并封装删除请求+跳转逻辑：

1. 编写自定义Hook（React Router v5版本）

import { useHistory } from 'react-router-dom';

// 自定义Hook必须以use开头，这是React识别Hook的标识
export function useRecipeActions() {
  // 在Hook顶层合法调用useHistory
  const history = useHistory();

  const deleteRecipe = async (recipeId) => {
    try {
      // 执行删除API请求，替换为你的实际接口地址
      await fetch(`/api/recipes/${recipeId}`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
          // 按需添加认证头，比如Authorization: `Bearer ${token}`
        },
      });
      // 删除成功后跳转至目标页面（示例为食谱列表页）
      history.push('/recipes');
    } catch (error) {
      // 错误处理：可根据需求替换为弹窗提示或日志上报
      console.error('删除食谱失败:', error);
      alert('删除失败，请稍后重试');
    }
  };

  // 返回封装好的方法供组件调用
  return { deleteRecipe };
}

2. 在组件中使用自定义Hook

import { useRecipeActions } from './hooks/useRecipeActions';

function RecipeCard({ recipe }) {
  // 在组件顶层调用自定义Hook
  const { deleteRecipe } = useRecipeActions();

  const handleDeleteClick = () => {
    if (window.confirm(`确定删除「${recipe.name}」吗？`)) {
      deleteRecipe(recipe.id);
    }
  };

  return (
    <div className="recipe-card">
      <h2>{recipe.name}</h2>
      <p>{recipe.description}</p>
      <button onClick={handleDeleteClick} className="delete-btn">删除食谱</button>
    </div>
  );
}

React Router v6适配说明 #

如果使用React Router v6，useHistory已被useNavigate替代，只需修改Hook内的跳转逻辑：

import { useNavigate } from 'react-router-dom';

export function useRecipeActions() {
  const navigate = useNavigate();

  const deleteRecipe = async (recipeId) => {
    // ...删除请求逻辑保持不变
    // 跳转改为调用navigate方法
    navigate('/recipes');
  };

  return { deleteRecipe };
}

关键注意事项 #

• 自定义Hook命名必须以use开头，确保React能识别并允许内部调用其他Hook。
• 所有Hook调用必须在组件或自定义Hook的顶层，不能放在条件判断、循环或嵌套函数中，严格遵守Hook规则。

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