React Router：使用高阶组件鉴权时触发无效Hook调用

问题背景 #

我基于React Router实现了两种React组件鉴权包装器，第一种组件式实现运行正常，第二种高阶组件（HOC）式实现却触发了"Invalid hook call"错误，需要明确原因并修复。

正常运行的组件式鉴权实现 #

import { PropsWithChildren } from 'react'
import { Navigate } from 'react-router-dom'
import { useAuth } from './auth-provider'

export function WithOptimisticAuth(props: PropsWithChildren) {
  const { isAuthenticated, isLoading, isError } = useAuth()
  if (isError || (!isLoading && isAuthenticated === false)) return <Navigate to="/login" replace />
  return <> {props.children} </>
}

export function WithConfirmedAuth(props: PropsWithChildren) {
  const { isAuthenticated, isLoading, isError } = useAuth()
  if (isLoading) return <> </>
  if (isError || isAuthenticated === false) return <Navigate to="/login" replace />
  return <> {props.children} </>
}

路由配置使用方式 #

// ... (router configuration)
.with(Routes.Installations, () => ({
  path: Routes.Installations,
  element: (
    <WithOptimisticAuth>
      <InstallationsPage />
    </WithOptimisticAuth>
  ),
}))
// ... (other routes)

存在问题的HOC式鉴权实现 #

import { ComponentType, PropsWithChildren } from 'react'
import { Navigate } from 'react-router-dom'
import { useAuth } from './auth-provider'

export const withOptimisticAuth =
  <P extends object>(Component: ComponentType<P>) =>
  (props: PropsWithChildren<P>) => {
    const { isAuthenticated, isLoading, isError } = useAuth()
    if (isError || (!isLoading && isAuthenticated === false)) return <Navigate to="/login" replace />
    return <Component {...props} />
  }

export const withConfirmedAuth =
  <P extends object>(Component: ComponentType<P>) =>
  (props: PropsWithChildren<P>) => {
    const { isAuthenticated, isLoading, isError } = useAuth()
    if (isLoading) return <> </>
    if (isError || isAuthenticated === false) return <Navigate to="/login" replace />
    return <Component {...props} />
  }

路由配置使用方式（错误写法） #

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    children: Object.keys(Routes).map(route =>
      match<Route>(Routes[route as keyof typeof Routes])
        .with(Routes.Installations, () => ({
          path: Routes.Installations,
          element: withOptimisticAuth(InstallationsPage)({}),
        }))
// ... (other routes)

错误信息 #

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

错误原因分析 #

核心问题是你在路由配置初始化阶段直接调用了HOC返回的组件函数：withOptimisticAuth(InstallationsPage)({})。

• 第一种组件式写法用<WithOptimisticAuth>，这是JSX语法，React会在组件渲染流程中才执行WithOptimisticAuth函数，此时useAuth是在组件函数体内调用，符合Hook规则。
• 而直接调用withOptimisticAuth(InstallationsPage)({})，是在应用初始化、创建路由的时候就执行了这个函数，此时不在React的组件渲染生命周期内，Hook调用违反了"只能在组件函数体或自定义Hook内调用"的规则，因此触发错误。

修复方案 #

有两种可靠的修复方式：

方式1：用JSX语法渲染HOC包装后的组件 #

把直接调用函数的写法改成JSX，让React在渲染阶段执行组件函数：

.with(Routes.Installations, () => ({
  path: Routes.Installations,
  element: <withOptimisticAuth(InstallationsPage) />,
}))

方式2：提前定义包装后的组件 #

先在路由配置外创建好鉴权后的组件，再在路由中使用：

// 提前定义受保护的组件
const ProtectedInstallationsPage = withOptimisticAuth(InstallationsPage);

// 路由配置中使用
const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    children: Object.keys(Routes).map(route =>
      match<Route>(Routes[route as keyof typeof Routes])
        .with(Routes.Installations, () => ({
          path: Routes.Installations,
          element: <ProtectedInstallationsPage />,
        }))
// ... (other routes)

两种写法的本质区别 #

• <InstallationsPage />是JSX，会被React编译为React.createElement(InstallationsPage, {})，这个调用是在组件渲染阶段执行的，Hook在组件函数体内调用完全合法。
• 而withOptimisticAuth(InstallationsPage)({})是直接在路由初始化时执行函数，相当于在React组件渲染流程之外调用了Hook，违反了Hook的使用规则，因此报错。

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