声明useContext时报Invalid hook call无效Hook调用错误，如何排查解决？

架构老林

2026-10-4

问题原因

路由配置错误：你当前Route的children属性直接传入了Login组件的引用，而非渲染后的组件元素，这会导致Login被当作普通函数直接执行，不符合React组件的渲染流程，Hook自然无法在合法上下文调用。
缺少AuthProvider外层包裹：你创建的AuthContext没有对应的Provider包裹路由组件，就算修复路由问题，后续也无法正常获取Context值。

解决方案

第一步修复路由写法

如果你使用的是react-router-dom v5版本，将Route部分改成以下两种写法任意一种即可：

写法1：使用component属性

<Route path="/" component={Login} exact />
<ProtectedRoute path="/dashboard" component={Dashboard} exact />

写法2：渲染组件元素传入children

<Route path="/" exact>
  <Login />
</Route>
<ProtectedRoute path="/dashboard" exact>
  <Dashboard />
</ProtectedRoute>

第二步包裹AuthProvider

将整个路由结构放在AuthProvider的内层，确保所有子组件都能访问到Context值，修改后的Routes组件代码如下：

import { FC } from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import { Dashboard } from '../pages/Dashboard'
import { Login } from '../pages/Login'
import { ProtectedRoute } from './ProtectedRoute'
import { AuthProvider } from '../AuthContext' // 引入AuthProvider

export const Routes: FC = () => {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Switch>
          <Route path="/" component={Login} exact />
          <ProtectedRoute path="/dashboard" component={Dashboard} exact />
        </Switch>
      </BrowserRouter>
    </AuthProvider>
  )
}