使用AntD搭建基础React应用出现空白页问题求助

1. 修正 AntD 样式导入（关键） #

AntD 5.x 已采用 CSS-in-JS 方案，无需全局导入样式文件。如果你按照旧文档引入了 antd/dist/antd.css，直接删除这行代码——全局样式导入会和新版 AntD 的样式系统冲突，导致渲染失败。

正确的基础示例代码：

import React from 'react';
import { Button } from 'antd';

function App() {
  return (
    <div className="App">
      <Button type="primary">Primary Button</Button>
    </div>
  );
}

export default App;

2. 排查依赖版本兼容性 #

从你的依赖配置及控制台错误来看，存在 React 钩子调用无效的问题，大概率是依赖版本不匹配：

• 确保 react 和 react-dom 版本完全一致，两者版本不一致会触发钩子错误
• 确认 AntD 版本与 React 版本兼容：AntD 5.x 要求 React ≥16.8.0，React 18.x 完全兼容；若你安装的是 AntD 4.x，需对应引入 antd/dist/antd.css，但建议升级到 5.x 避免版本适配问题

3. 暂时关闭 React 18 StrictMode #

React 18 的 StrictMode 会触发组件两次渲染，部分旧依赖可能出现适配问题。修改 index.js 注释掉 StrictMode 标签测试：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

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

若关闭后页面正常渲染，说明是依赖与 StrictMode 不兼容，后续可通过升级依赖版本彻底解决。

4. 清除缓存重新构建 #

执行以下命令清理项目缓存并重装依赖，解决潜在的依赖安装异常：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
npm start

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