新创建的React应用页面无响应，过往创建的旧项目运行正常

DevOps 小满

2026-9-29

问题排查原因及解决方案

React版本与渲染API不兼容
你当前index.js中使用的是React 17及更早版本的ReactDOM.render渲染语法，若新创建的项目默认安装了React 18+版本，旧渲染API和新版本不兼容会直接导致运行异常、页面无响应。
解决方法：替换index.js的渲染逻辑为React 18标准写法：

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>
);

依赖包安装异常
项目创建过程中如果出现网络波动，会导致依赖包安装不完整，触发运行问题。
解决方法：删除项目根目录下的node_modules文件夹、package-lock.json（npm环境）或yarn.lock（yarn环境）文件，重新执行依赖安装命令：
npm环境执行：npm install
yarn环境执行：yarn install
安装完成后重新启动项目测试即可。
React严格模式触发异常
新版本React的StrictMode在开发环境会执行两次组件渲染，若存在隐藏的副作用逻辑会被放大导致页面卡死，可先临时关闭严格模式验证问题：去掉index.js中包裹<App />的<React.StrictMode>标签，重启项目查看页面是否恢复正常。
浏览器缓存/扩展冲突
浏览器缓存损坏、第三方扩展拦截页面资源也会导致新项目运行异常，旧项目因为已经缓存了正常资源不受影响。可使用浏览器无痕模式打开项目页面，或临时禁用所有浏览器扩展后测试。
开发服务端口冲突
项目默认启动的3000端口如果被其他程序占用，也会导致页面加载异常，可修改启动端口验证：打开项目package.json文件，修改scripts下的start命令：
Mac/Linux环境："start": "PORT=3001 react-scripts start"
Windows环境："start": "set PORT=3001 && react-scripts start"
修改完成后重新启动项目，访问3001端口测试。