React 18提示ReactDOM.render不再支持，新手如何改用createRoot？

修改后的完整 index.js 代码 #

import React from 'react';
// 修正拼写错误，导入正确的ReactDOM
import ReactDOM from 'react-dom/client';
// 修正react-router-dom的拼写
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';

// 获取页面上的根DOM元素（通常是id为root的div）
const root = ReactDOM.createRoot(document.getElementById('root'));

// 使用createRoot的render方法渲染组件
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

分步解释修改点 #

• 修正导入拼写错误：原代码里React DOM、react-Dom、react-router-Dom都是拼写错误，正确写法是ReactDOM、react-dom、react-router-dom（大小写和连字符需严格对应）。
• 导入createRoot：React 18中createRoot从react-dom/client路径导入，替代了旧版的ReactDOM.render。
• 创建根实例：调用ReactDOM.createRoot()传入挂载用的DOM节点（一般是页面中<div id="root"></div>元素），生成根实例。
• 渲染组件：调用根实例的render方法，把包裹在Router和React.StrictMode里的App组件传入即可。

注意：确保你的public/index.html文件中存在<div id="root"></div>，否则React找不到挂载节点。

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