如何修复React嵌套Router场景下出现的Invalid hook call错误

问题修复方案 #

导致Invalid hook call报错的核心原因只有三类：存在多份React副本、Hook未在函数组件顶层调用、Hook在普通JS函数中调用，结合你的路由拆分场景，可按以下步骤排查修复：

• 排查React多副本问题
  在项目根目录执行如下命令检查React版本：

  npm ls react
  npm ls react-dom
  

  如果输出存在多个不同版本的React，删除项目下的node_modules文件夹、package-lock.json或yarn.lock文件后重新执行依赖安装即可。
• 校验Hook调用规范
  确认所有Hook（包括你Login组件中的useState）都写在函数组件的最顶层，不要嵌套在条件判断、循环、内部函数中。
• 调整路由渲染逻辑
  你当前的路由没有做登录态校验，且路由组件渲染方式可能存在上下文错误，建议做两处修改：
  1. 新增私有路由守卫组件，统一控制登录后路由的访问权限：

  const PrivateRoute = ({ component: Component, ...rest }) => {
    // 替换为你项目实际的登录状态判断逻辑
    const isAuthenticated = !!localStorage.getItem('user_token')
    return (
      <Route
        {...rest}
        render={props => 
          isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
        }
      />
    )
  }
  

  2. 替换AppRouter中的根路径路由配置，改用render属性渲染组件避免上下文丢失：

  export const AppRouter = () => {
    return (
      <Router>
        <div>
          <Switch>
            <Route exact path="/login" component={Login} />
            <PrivateRoute path="/" render={props => <DashboardRoutes {...props} />} />
          </Switch>
        </div>
      </Router>
    );
  };
  

• 检查组件调用方式
  确认你项目中所有组件的使用都是<Component />的JSX渲染形式，不要出现Login()这种直接把组件当普通函数调用的写法，这种写法会导致Hook的调用上下文错误触发报错。

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