反应导出服务中 useNavigate 上的无效挂钩调用

Question

我将以下代码导出为 CommonService.tsx 并调用为 COMMON.redirect('/');

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

export function Redirect(route: string) {
    const navigate = useNavigate();
    return navigate(route);

};

const COMMON = {
    redirect: Redirect,
};

export default COMMON;

但是在调用 COMMON.redirect('/'); 之后，我收到以下异常：

无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则

共享服务中useNavigate的正确用法应该是什么（我想调用一个方法而不是在多个组件中导入useNavigate）。

Answer 1

Redirect

不是 React 组件或自定义 React hook，因此您违反了 Hooks 规则。

仅调用顶层的钩子

不要在循环、条件或嵌套函数内调用 Hooks。相反，始终在 React 函数的顶层使用 Hooks， 在任何提前返回之前。通过遵循此规则，您可以确保 每次组件渲染时都会以相同的顺序调用钩子。 这就是 React 能够正确保存 Hooks 状态的原因 在多个

useState

和

useEffect

调用之间。

仅从 React 函数调用 Hooks

不要从常规 JavaScript 函数中调用 Hook。 相反，您可以：

• ✅ 从 React 函数组件调用 Hooks。
• ✅ 从自定义 Hooks 调用 Hooks

更新代码，以便在 React hook 中调用

useNavigate

。返回封装/返回

redirect

函数的自定义钩子。

示例：

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

export function useRedirect() {
  const navigate = useNavigate();
  return (route: string) => navigate(route, { replace: true });
};

const COMMON = {
  useRedirect,
};

export default COMMON;

导入

COMMON

或

useRedirect

钩子以在 React 组件中使用。

const SomeComponent = () => {
  const redirect = COMMON.useRedirect();

  ...

  redirect("/somePath");

  ...
};

这并没有比直接导入和使用

useNavigate

钩子更好。