ReactDOM创建应用报错：render不是函数，页面空白无输出

问题原因 #

你使用的是React 18的导入方式（import ReactDOM from 'react-dom/client'），但依然沿用了React 17及更早版本的ReactDOM.render语法——React 18已将渲染逻辑重构，原ReactDOM.render方法不再存在于react-dom/client导出中，因此触发类型错误，导致页面空白。

修复方案 #

改用React 18官方推荐的createRoot API进行渲染，修改代码如下：

import React from 'react';
import { createRoot } from 'react-dom/client'; // 解构导入createRoot
import App from './App';

// 获取页面根元素
const rootElement = document.getElementById('root');
// 创建根容器实例
const root = createRoot(rootElement);
// 渲染组件
root.render(<React.StrictMode><App /></React.StrictMode>);

关键说明 #

• React 18废除了全局的ReactDOM.render，转而要求通过createRoot创建根容器实例后调用render方法
• 若你想临时沿用旧语法，可将导入路径改回import ReactDOM from 'react-dom'，但不推荐——React 18的新API包含并发渲染等核心优化特性，建议适配新写法

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