React18 ReactDOM.render弃用与react-router-dom模块缺失问题解决咨询

一、ReactDOM.render 弃用问题解决及变更内容 #

解决方法 #

React 18 移除了 ReactDOM.render，需改用 createRoot API，步骤如下：

1. 从 react-dom/client 导入 createRoot：

   import { createRoot } from 'react-dom/client';
   

2. 获取页面根节点，创建根实例并调用 render 方法：

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

   若需启用严格模式，直接将组件包裹在 <React.StrictMode> 中即可：

   root.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>
   );
   

相关变更内容 #

• 并发渲染支持：createRoot 是为 React 18 核心的并发渲染特性设计的，ReactDOM.render 无法启用自动批处理、过渡 API 等新特性。
• 渲染逻辑调整：createRoot 采用更高效的并发渲染机制，组件挂载、更新逻辑有细微变化，比如严格模式下会额外执行一次挂载和卸载，用于检测潜在的副作用问题。
• 错误边界优化：并发模式下错误边界的处理逻辑更完善，能更好地隔离组件错误，避免整个应用崩溃。

二、react-router-dom 模块找不到问题解决 #

解决方法 #

该错误源于未安装依赖或导入路径错误，对应解决方案：

1. 安装依赖：进入项目根目录，执行对应包管理命令安装：
   • npm 命令：

     npm install react-router-dom
     

   • yarn 命令：

     yarn add react-router-dom
     

2. 修正导入路径：确保导入语句是从包名而非相对路径导入，示例：
   错误写法：

   import { BrowserRouter } from './react-router-dom';
   

   正确写法：

   import { BrowserRouter } from 'react-router-dom';
   

相关说明 #

目前与 React 18 兼容的稳定版本是 React Router v6，它相比旧版本有较多 API 变更，比如用 Routes 替代 Switch，element 属性替代 component 属性等。

内容的提问来源于stack exchange，提问作者Yelisetti Satya Siva nagendra