React JS 集成Auth0时触发Invalid hook call，报错指向useHistory

对接Auth0登录流程时，自定义封装带路由回调能力的Auth0Provider组件，触发Invalid hook call. Hooks can only be called inside of the body of a function component报错，错误堆栈直接指向代码中的useHistory调用位置。
问题代码如下：

import React from 'react';
import { useHistory } from 'react-router-dom';
import { Auth0Provider } from "@auth0/auth0-react";

const Auth0ProviderWithHistory = ({ children }) => {
    
    const history = useHistory();
    const domain = process.env.REACT_APP_AUTH0_DOMAIN;
    const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

    const onRedirectCallback = (appState) => {
        history.push(appState?.returnTo || window.location.pathname);
    };

    return (
        <Auth0Provider
        domain={domain}
        clientId={clientId}
        redirectUri={window.location.origin}
        onRedirectCallback={onRedirectCallback}
        >
          {children}  
        </Auth0Provider>
    );
};

export default Auth0ProviderWithHistory;

核心触发原因与对应修复方法 #

• 路由上下文缺失
  useHistory是react-router-dom提供的自定义hook，必须在被路由根组件（如BrowserRouter、HashRouter）包裹的组件内部调用。如果当前封装的Auth0ProviderWithHistory被放在路由根组件的外层挂载，组件内部的useHistory会因为拿不到合法的路由上下文，触发hook调用规则校验失败。
  修复方式：调整组件挂载层级，确保渲染顺序为BrowserRouter → Auth0ProviderWithHistory → 应用页面/路由出口，不要把依赖路由hook的Provider放在路由包裹层的外侧。
• react-router-dom版本错配
  如果项目使用的是react-router-dom v6及以上版本，useHistory方法已经被官方移除，替换为useNavigate。此时从react-router-dom导入的useHistory为undefined值，调用undefined值就会触发这类hook报错。
  修复方式：匹配当前路由版本调整代码，v6版本下参考如下修改逻辑：

  // 替换导入语句
  import { useNavigate } from 'react-router-dom';
  // 组件内部替换hook调用
  const navigate = useNavigate();
  // 替换跳转逻辑
  const onRedirectCallback = (appState) => {
    navigate(appState?.returnTo || window.location.pathname);
  };
  

• 依赖重复实例化
  如果项目依赖树中存在多份react、react-dom实例（比如本地调试依赖嵌套、npm link软链接导致的重复安装），会导致React内部的hook校验机制识别异常，误判hook调用位置不合法。
  排查方式：执行npm ls react react-dom react-router-dom检查依赖树，确认所有依赖指向同一版本的react、react-dom，不存在重复安装的情况。
• 组件调用方式错误
  如果当前代码没有把Auth0ProviderWithHistory作为JSX组件渲染，而是直接以普通函数的方式调用（比如Auth0ProviderWithHistory({children: app})），这种调用方式不会进入React的组件渲染管线，内部所有hook调用都会触发规则报错。
  修复方式：确保组件以标准JSX语法渲染，比如<Auth0ProviderWithHistory>{app}</Auth0ProviderWithHistory>，不要直接执行组件函数拿到返回值。

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