React导入组件无法渲染 Invalid hook call报错排查

核心报错原因共4项，逐项修复即可：

• 缺失路由依赖：package.json的依赖列表中没有安装react-router-dom，代码中导入的BrowserRouter、Routes、Route等组件实际不存在，组件内部调用React Hook时找不到合法上下文，直接触发Invalid hook call和useRef读取null的报错。
• 重复嵌套路由根容器：index.js中已经用<BrowserRouter>包裹了App根组件，App.js中又重复嵌套了一层<BrowserRouter>，双重路由容器会导致路由上下文冲突，无法正常渲染子组件。
• package.json配置语法错误：proxy字段被错误写在了dependencies依赖对象内部，且多处字符串值的结尾引号缺失闭合，会导致依赖安装、项目构建时配置解析失败。
• 控制台第一条browser is not defined报错来自广告拦截插件注入的第三方脚本，和项目代码无关，不会影响业务逻辑运行。

具体修复操作 #

1. 修正package.json配置：将proxy字段移到配置顶层，补全所有缺失的闭合引号，在dependencies中添加react-router-dom依赖，修正后的完整配置如下：

{
  "name": "react-portfolio",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

2. 精简App.js代码，删除重复导入和嵌套的BrowserRouter，修正后代码如下：

import './App.scss';
import { Routes, Route } from 'react-router-dom'
import Layout from './components/Layout'

function App() {
  return (
    <>
     <Routes>
      <Route path="/" element={<Layout />} />
     </Routes>
    </>
  )
}

export default App;

3. 删除项目根目录下的node_modules文件夹和package-lock.json文件，在项目目录执行npm install重新安装所有依赖，安装完成后执行npm start重启开发服务。

如果重启后控制台仍有adblock相关报错，给本地localhost开发地址关闭广告拦截插件即可，该报错不影响项目功能。

内容的提问来源于stack exchange，提问作者Mr. Hargrove