React构建作品集网页时组件无法渲染，求排查方案

核心问题拆解 #

• index.js未导入App组件：代码里直接渲染<App />但未导入App模块，React找不到对应组件，自然无法输出内容。
• 冗余的body内容替换：document.body.innerHTML = '<div id="root"></div>'完全没必要，index.html里已经存在root容器，这行代码会清空原有DOM，反而可能干扰渲染流程。
• Navbar导入路径错误：App.js本身在src目录下，导入Navbar时不需要再加./src前缀，路径层级错误会导致组件无法被加载。

修复后的代码 #

index.js #

import { createRoot } from 'react-dom/client';
import React from 'react';
import App from './App'; // 必须导入App组件

// 移除多余的body替换代码

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

App.js #

import React from "react";
// 修正路径：App在src下，直接指向components目录
import Navbar from "./components/Navbar/navbar";

const App = () => {
    return (
        <div className="App">
            <Navbar />
        </div>
    )
}
export default App

navbar.js（可选兼容） #

// React 17+可省略，但部分旧环境需要导入React
import React from 'react';

const Navbar = () => {
    return (
        <h1>react is rendering this 'navbar'</h1>
    );
}
export default Navbar

验证步骤 #

1. 启动Webpack Dev Server后，打开浏览器控制台的Elements面板，检查#root容器内是否有Navbar的DOM元素
2. 查看Console面板，确认是否有导入路径相关的警告（部分情况下错误会被抑制，警告会暴露问题）
3. 确认项目结构与导入路径匹配，避免层级错误

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