React应用服务器启动正常但页面空白，报Invalid hook call错误

1. 确保React与React DOM版本完全匹配 #

报错提示的首要原因就是版本不匹配，本地正常但部署后出错，大概率是依赖安装不一致导致的：

• 检查package.json中react和react-dom的版本号是否完全一致，比如都指定为^18.2.0
• 部署前删除node_modules和package-lock.json（或yarn.lock），重新执行npm install，确保依赖完全统一后再打包部署

2. 排查是否存在多份React实例 #

项目中如果同时存在多个React副本，会直接导致Hook调用规则被破坏：

• 在项目根目录执行命令：

  npm ls react react-dom
  

• 若输出显示多个版本的react/react-dom，清理重复依赖后重新安装

3. 修复react-router-dom的使用错误 #

你的代码中使用了Link组件，但整个应用没有被Router上下文包裹，Link内部依赖Router的上下文Hook，这会直接触发「Invalid hook call」错误：
修改index.js，添加BrowserRouter包裹组件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Header from './App';
import { BrowserRouter } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Header />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

额外验证 #

确保部署的是生产环境打包产物：执行npm run build后，将生成的build目录下的文件上传到服务器，而非直接上传开发源文件。

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