如何让React项目加载index.js组件而非public/index.html页面

核心问题分析 #

你的项目页面空白主要源于三个关键问题：

• index.js缺少组件挂载逻辑，未将App组件渲染到页面DOM中
• package.json的启动命令参数错误，干扰了react-scripts的默认行为
• React Router的basename配置不符合规范

具体修复步骤 #

1. 补全index.js的渲染逻辑 #

你的index.js仅定义了App组件，但没有将其挂载到HTML页面的根节点。React 18需使用createRoot完成挂载，取消注释并补充完整代码：

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import './App.css';
import HomePage from './components/HomePage';

function App() {
  return (
    <Router basename="/"> {/* 修正basename为路径前缀，而非完整URL */}
      <Routes>
        <Route path="/" element={<HomePage />} />
        {/* 按需添加更多路由 */}
      </Routes>
    </Router>
  );
}

// 挂载App组件到页面的root节点
const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. 修正package.json的scripts命令 #

react-scripts默认会自动识别src/index.js作为入口文件，无需在start和build命令后追加路径参数，修改scripts部分：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

3. 确认public/index.html的结构正确性 #

检查public/index.html中是否存在id为root的DOM节点，这是React挂载组件的容器，需保留如下代码：

<div id="root"></div>

请勿注释该节点，否则React无挂载目标，页面会持续空白。

验证修复效果 #

1. 执行npm install重新安装依赖（若之前删除过lock文件）
2. 运行npm start启动项目
3. 此时应能正常渲染HomePage组件内容

React基础概念补充 #

React项目的运行逻辑：

• public/index.html是页面静态模板，React会将组件挂载到该文件内的root节点上
• src/index.js是React应用的入口文件，负责初始化并渲染根组件（如App）
• React Router是客户端路由实现，需依赖React成功挂载到页面后才能生效

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