React应用仅渲染index.css，App.js内容不显示问题求助

我的React应用无法渲染App.js中的内容，页面只显示index.css设置的背景色。项目构建无报错，且已正确在App.js中导入所有组件、在index.js中导入App组件。尝试过将箭头函数改写为普通函数、重命名文件、拆分App内容到其他文件导入等方法，均未解决问题。相关代码如下：

App.js #

import React from 'react';
import { useState } from 'react';
import Header from './components/Header';
import Nav from './components/Nav';
import About from './components/pages/About';
import Skills from './components/pages/Skills';
import Projects from './components/Projects';
import Resume from './components/pages/Resume';
import Contact from './components/pages/Contact';
import Footer from './components/Footer';

const App = () => {
    const [currentPage, setCurrentPage] = useState('About');

    const renderPage = () => {
        if (currentPage === "About") {
            return <About />;
          }
          if (currentPage === "Skills") {
            return <Skills />;
          }
          if (currentPage === "Projects") {
            return <Projects />;
          }
          if (currentPage === "Contact") {
            return <Contact />;
          }
          return <Resume />;
        };
      
        const handlePageChange = (page) => setCurrentPage(page);
      
        return (
          <div>
            <Nav currentPage={currentPage} handlePageChange={handlePageChange} />
            <Header />
            {renderPage()}
            <Footer/>
          </div>
        );
}

export default App;

index.js #

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

ReactDOM.render(<App/>, document.querySelector("#root"))

index.css #

* {
    margin:0;
    padding: 0;
    border:0;
    outline:0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

:root {
    --color-bg: #1f1f38;
    --color-bg-v: #2c2c6c;
    --color-pr: #4db5ff;
    --color-pr-v:rgba(77,181,255,0.4);
    --color-w:white;
    --color-light: rgba(255,255,255,0.6);
    --container-w-lg:75%;
    --container-w-md:86%;
    --container-w-sm: 90%;
    --transition: all 400ms ease;
}

html {
    scroll-behavior:smooth;
}

::-webkit-scrollbar {
    display:none
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--color-bg);
    color: var(--color-w);
    line-height: 1.7;
}

.container {
    width: var(--container-w-lg);
    margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 500;
}

h1 {
    font-size:2.5rem;
}

section {
    margin-top: 8rem;
}

section > h2, section > h5 {
    text-align: center;
    color: var(--color-light)
}

section > h2 {
    color: var(--color-pr);
    margin-bottom: 3rem;;
}

.text-light {
    color: var(--color-light);
}

a {
    color: var(--color-pr);
    transition: var(--transition);
}

a:hover {
    color: var(--color-w);
}
.btn {
    width: max-content;
    display: inline-block;
    color: var(--color-pr);
    padding: 0.75rem 1.2rem;
    border-radius:0.4rem;
    cursor:pointer;
    border: 1px solid var(--color-pr);
    transition: var(--transition);
}

.btn:hover {
    background: var(--color-w);
    color: var(--color-bg);
    border-color: transparent;
}

.btn-primary {
    background: var(--color-pr);
    color:var(--color-bg)
}

img{
    display:block;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {
    .container {
        width: var(--container-w-md);
    }
    section {
        margin-top: 6rem;
    }  
}

@media screen and (max-width: 1024px) {
    .container {
        width: var(--container-w-sm);
    }
    section > h2{
        margin-top: 2rem;
    }  
}

排查与解决方向 #

• 检查子组件有效性：确认Header、Nav、About等所有导入的组件都已正确导出（使用export default），且组件内部返回有效JSX，没有返回null或空内容。可以临时将{renderPage()}替换为<div>测试内容</div>，验证App根组件是否能正常渲染。
• 确认渲染目标DOM存在：检查public/index.html中是否包含<div id="root"></div>，如果这个元素缺失，React无法挂载组件，页面只会显示CSS背景。
• 适配React 18渲染方式：如果使用React 18，ReactDOM.render已被废弃，需改用createRoot：

  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(<App />);
  

• 排查样式隐藏问题：打开浏览器开发者工具（F12），在Elements面板查看App组件的DOM结构是否存在，检查子组件CSS是否设置了display: none等隐藏属性。
• 查看完整控制台报错：切换到Console面板的"All levels"，排查是否有组件导入路径错误、JSX语法错误等隐性报错，这类错误可能不会触发构建失败，但会导致组件无法加载。

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