浏览器调试时React未定义，无法获取Context中username求助

核心问题定位方向及解决办法 #

1. React 导入遗漏或错误 #

所有使用 React Hooks（useContext/useState）或 JSX 的文件，必须在顶部显式导入 React，哪怕是 React 17+ 版本，部分旧编译配置或浏览器环境仍需手动导入：

// context.js、ProtectedRoute.js 等文件顶部必须添加
import React, { createContext, useContext, useState } from 'react';

遗漏这一步会直接触发 React is not defined 错误，这是旧版本浏览器中最常见的诱因。

2. AuthContext 未正确包裹业务组件 #

确认你的根路由组件（比如 App.js）完全被 AuthContext.Provider 包裹，且传递了包含 username 的 value：

// context.js 标准示例
const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [username, setUsername] = useState(null);

  return (
    <AuthContext.Provider value={{ username }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

根组件包裹方式：

import { AuthProvider } from './context';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/main" element={<ProtectedRoute />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}

如果 ProtectedRoute 或 MainPage 不在 AuthProvider 的子节点范围内，useAuth() 只能拿到 Context 的默认值（undefined）。

3. 违反 React Hook 调用规则 #

useAuth() 作为自定义 Hook，必须严格遵循 Hook 规则：

• 只能在函数组件的顶层调用，不能放在条件判断、循环、嵌套函数里
• 只能在 React 函数组件或其他自定义 Hook 中调用

错误示例：

function ProtectedRoute() {
  if (!localStorage.getItem('token')) {
    const { username } = useAuth(); // ❌ 在条件分支内调用Hook
  }
}

正确示例：

function ProtectedRoute() {
  const { username } = useAuth(); // ✅ 顶层调用
  const navigate = useNavigate();

  if (!username) {
    navigate('/login');
    return null;
  }

  return <MainPage />;
}

4. 依赖版本不兼容 #

检查 package.json 中 React 和 react-router-dom 的版本匹配度，建议使用稳定兼容的组合：

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.4.0"
  }
}

如果 React 版本低于 16.8（不支持 Hooks），或 react-router-dom 版本与 React 不匹配，会导致 Hook 调用异常。可删除 node_modules 和 package-lock.json 后重新执行 npm install 修复依赖。

5. 旧浏览器缓存干扰 #

针对 Firefox 91 ESR 这类旧版本浏览器，尝试以下操作：

• 按 Ctrl+Shift+R 强制刷新页面，清除缓存
• 重启本地开发服务器
• 检查项目是否存在旧编译产物，可删除 build 目录后重新构建

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