使用React Router与React时遭遇无效Hook调用错误求助

核心问题分析 #

你直接在HTML文件中引入未打包的src/index.js，浏览器无法解析ES模块的import语法，这种错误的运行方式会导致React环境初始化异常，进而触发「Invalid hook call」错误。同时代码中存在一些不规范的导入写法，也可能加剧问题。

具体解决步骤 #

1. 改用官方开发服务器运行项目 #

create-react-app创建的项目不能直接打开HTML文件运行，必须通过开发服务器启动：

• 打开终端，进入项目根目录
• 执行命令：

  npm start
  # 或 yarn start（如果你用yarn）
  

  启动后访问终端提示的本地地址（默认是http://localhost:3000）

2. 修正代码中的错误 #

（1）修复App.js的导入问题

将小写的react导入改为大写，同时移除无用的ReactDOM导入：

import { BrowserRouter, Routes, Route} from 'react-router-dom'
import './App.css';
import React from 'react' // 修正为大写的React

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<div>fhhthrtytt</div>}/>
      </Routes>
    </BrowserRouter>
  );
}

（2）移除HTML中的错误脚本引入

public/index.html不需要手动引入src/index.js，create-react-app会自动注入打包后的脚本，删除这一行：

<script src="../src/index.js"></script>

3. 确保React与ReactDOM版本匹配 #

检查package.json中react和react-dom的版本号，确保两者完全一致。如果版本不匹配，执行以下命令更新：

npm install react@latest react-dom@latest
# 或 yarn add react@latest react-dom@latest

4. 清除重复的React实例 #

如果项目中存在多个React副本，执行以下操作重置依赖：

• 删除项目根目录下的node_modules文件夹和package-lock.json（或yarn.lock）文件
• 重新执行npm install或yarn install

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