如何在独立处理函数文件中正确导入并使用useNavigate？

报错原因 #

useNavigate是React Router提供的Hook，必须严格遵循React Hook规则：

• 只能在React组件的顶层或者以use开头的自定义Hook顶层调用
• 不能在普通函数、嵌套函数、异步回调里调用

你之前的两种写法都违反了规则：

1. 直接在文件顶层调用useNavigate，不在React组件/自定义Hook的渲染流程中，无法获取React上下文，导致useContext读取null的报错
2. 在普通异步函数onSubmit内部调用useNavigate，属于在嵌套函数里调用Hook，同样无法获取上下文触发错误

解决方案1：封装成自定义Hook #

把提交逻辑封装成自定义Hook，这样就能合法调用useNavigate：

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

// 自定义Hook必须以use开头
export const useSubmitHandler = () => {
  const navigate = useNavigate();

  const onSubmit = async () => {
    // 这里添加你的表单提交逻辑（比如接口请求）
    navigate('/success');
  };

  return { onSubmit };
};

在React组件中使用：

import { useSubmitHandler } from './你的文件路径';

function YourFormComponent() {
  const { onSubmit } = useSubmitHandler();

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      onSubmit();
    }}>
      {/* 表单元素 */}
      <button type="submit">提交</button>
    </form>
  );
}

解决方案2：将navigate作为参数传入 #

如果不想用自定义Hook，可以从组件里把navigate作为参数传给普通函数：

// 独立文件中的代码
export const onSubmit = async (navigate) => {
  // 表单提交逻辑
  navigate('/success');
};

在React组件中使用：

import { useNavigate } from 'react-router-dom';
import { onSubmit } from './你的文件路径';

function YourFormComponent() {
  const navigate = useNavigate();

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      onSubmit(navigate);
    }}>
      {/* 表单元素 */}
      <button type="submit">提交</button>
    </form>
  );
}

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