Error: Invalid hook call

场景： react请求拦截器里面在store中获取token，zustand的useUserStore报错 请求响应拦截器中，使用react router 的useNavigate报错

官方解释：zh-hans.react.dev/warnings/in…

原因: 排查1，版本问题，没有发现问题
排查2：ReactHook只能在函数组件或者自定义Hook内部调用，而响应拦截器不属于这种场景，所以报错

解决：

// 为了避免在非组件环境下调用 `useUserStore`，可以直接从 `useUserStore` 的实例里获取状态，而不是通过 Hook 来获取
const { useInfo } = useUserStore.getState();


// 定义一个导航函数类型
type NavigateFunction = (to: string) => void;
let navigateFn: NavigateFunction | null = null;
// 提供一个设置导航函数的方法
export function setNavigate(navigate: NavigateFunction) {
  navigateFn = navigate;
}

// 跳转401
navigateFn?.('/401')

在函数组件中设置

import { useNavigate } from '@tanstack/react-router';
import { setNavigate } from './utils/request';

const App = () => {
  const navigate = useNavigate();

  // 设置导航函数
  setNavigate((to) => navigate({ to }));

  return (
    // 组件内容
  );
};

export default App;

在函数组件中设置

import { useNavigate } from '@tanstack/react-router';
import { setNavigate } from './utils/request';

const Componnent = () => {
  const navigate = useNavigate();

  // 设置导航函数
  setNavigate((to) => navigate({ to }));

  return (
    // 组件内容
  );
};

export default Componnent;