React页面未渲染显示：首次创建项目启动后仍显示默认启动页求助

算力阿峰

2026-8-11

问题解决：React默认启动页无法替换的原因及修复步骤

你犯了几个create-react-app使用的基础错误，逐个解决就能正常显示你的导航栏：

1. 项目创建命令错误

npx create-react-app App.js是错误用法，create-react-app后需跟项目文件夹名称而非文件名。这个错误会导致项目结构混乱，工具无法按正常流程打包。

2. App.js写法不符合框架约定

create-react-app要求App.js导出一个React组件，而非直接在文件内执行渲染逻辑。默认项目结构中，src/index.js才是负责将App组件渲染到页面的入口文件。

3. 错误修改了index.html文件

create-react-app只会使用public文件夹下的index.html作为页面模板，你修改的其他位置的index.html不会被打包工具识别；同时模板里无需手动添加<script src="App.js">，工具会自动注入打包后的脚本。

正确操作步骤：

重新创建规范的React项目：

# 创建自定义名称的项目，示例为my-wiggly-app
npx create-react-app my-wiggly-app
# 进入项目文件夹
cd my-wiggly-app

替换src/App.js内容为：

import React from "react";

function App() {
  return (
    <nav>
      <h1>Wiggly's</h1>
      <ul>
        <li>Menu</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  );
}

export default App;

保留src/index.js的默认内容（create-react-app自动生成，负责渲染App组件）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();