React路由引入后报错Invalid hook call及script标签配置疑问

一、解决"Invalid hook call"及相关报错 #

1. 版本兼容性检查 #

react-router-dom v6+要求React版本≥16.8.0（支持Hooks），先确认当前版本：

npm list react react-dom react-router-dom

若版本不兼容，执行升级：

npm install react@latest react-dom@latest react-router-dom@latest

2. 清理重复依赖 #

项目中存在多份React实例会导致Hook调用异常，执行以下命令重装依赖：

rm -rf node_modules package-lock.json
npm install

同时检查package.json，确保react和react-dom只有唯一的依赖条目。

3. 组件Hook调用规范检查 #

虽然你没直接用useRef，但react-router-dom内部依赖Hooks，需确保：

• HomePage、AboutPage均为函数组件，且useContext等Hooks仅在组件顶层调用（不能在条件判断、循环、嵌套函数内使用）
• 所有组件都包裹在React上下文（即<React.StrictMode>或普通<App>）内，没有脱离React环境的渲染逻辑

二、解决script标签MIME类型报错 #

直接在浏览器打开本地index.html会触发该问题，原因是静态文件未通过正确的服务器处理：

1. 使用官方开发服务器 #

如果是create-react-app初始化的项目，直接启动内置服务器即可：

npm start

开发服务器会自动处理JS模块的MIME类型，无需修改index.html中的script标签。

2. 自定义服务器配置（非create-react-app场景） #

若手动搭建服务器，需确保服务器将.js文件的MIME类型设置为application/javascript。以Express为例，添加配置：

app.use(express.static('public', {
  setHeaders: (res, path) => {
    if (path.endsWith('.js')) {
      res.setHeader('Content-Type', 'application/javascript');
    }
  }
}));

注意：不要将type改为text/html，这会导致浏览器无法解析JS模块。

额外排查项 #

• 检查HomePage/AboutPage中Context的使用是否合规，比如是否在类组件中错误调用useContext（类组件需用Context.Consumer或高阶组件）
• 若为手动搭建项目，确认Babel配置正确，支持JSX和ES模块语法

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