React项目启动后打开index.html而非index.jsx问题求助

问题描述 #

原本React项目执行npm start会自动加载index.jsx渲染页面，但删除public目录下的index.html再恢复后，页面仅显示空白的静态index.html，只有修改该文件内容才会有变化。已尝试删除node_modules和package-lock.json重新执行npm install，问题仍未解决。项目package.json内容如下：

{
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.8.0",
    "react-router-dom": "^6.10.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
    "build": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start-build": "npm run start & npm run build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "gh-pages": "^5.0.0",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.3.1"
  }
}

解决方案 #

• 检查index.html的核心节点
  确保index.html里存在用于挂载React应用的根节点<div id="root"></div>，这是React渲染的入口。如果恢复的文件缺少这个节点，React无法挂载应用，只会显示空白静态页。

• 清除react-scripts缓存
  react-scripts可能缓存了旧的资源映射，执行以下命令强制重置缓存：

  npm start -- --reset-cache
  

  也可以手动删除项目根目录下的.cache文件夹（若存在），再重启项目。

• 验证入口文件的挂载逻辑
  检查src/index.jsx（或你的项目入口文件）是否正确将React应用挂载到根节点上，React 18的标准代码如下：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

  确认document.getElementById('root')对应的节点在index.html中存在，且入口文件路径无误。

• 替换为标准index.html模板
  如果以上步骤都无效，直接用Create React App的标准模板替换当前的index.html，确保文件结构正确：

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta
        name="description"
        content="Web site created using create-react-app"
      />
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      <title>React App</title>
    </head>
    <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
    </body>
  </html>
  

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