首次创建React应用：Header.jsx导入导出后页面仍空白求助

• 检查根组件挂载是否正确
  打开项目入口文件（通常是src/index.js或src/main.jsx），确认代码是否正确将App组件挂载到DOM：

  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>
  );
  

  同时检查public/index.html里是否存在<div id="root"></div>元素，没有的话需要添加。

• 确认组件导入导出匹配
  确保Header组件的导出方式和App中的导入方式完全对应：

  • 若Header是默认导出：export default function Header() { ... }，则App里要写import Header from './Header'（注意文件名大小写，React项目严格区分大小写，比如Header.jsx和header.jsx会被识别为不同文件）
  • 若为命名导出：export function Header() { ... }，则App里要写import { Header } from './Header'

• 检查组件是否有有效返回内容
  打开Header.jsx，确认组件返回了正确的JSX内容：

  • 避免这类错误写法（无返回值）：

    const Header = () => {
      <h1>我的头部</h1> // 未写return，会返回undefined
    }
    

  • 正确写法示例：

    const Header = () => {
      return <h1>我的头部</h1>;
    }
    // 或简写形式
    const Header = () => <h1>我的头部</h1>;
    

  另外不要返回null或空的<></>，除非你确实需要空白内容。

• 查看浏览器控制台报错
  按F12打开浏览器开发者工具，切换到Console标签页，检查是否存在语法错误、模块未找到等提示（比如Module not found说明导入路径错误，SyntaxError表示代码语法有误），这类错误会直接导致组件无法渲染。

• 重启开发服务器
  有时候热更新会出现异常，关闭当前运行的npm start进程，重新执行npm start启动服务器，再刷新页面尝试。

• 确认App组件中渲染了Header
  打开App.jsx，确认你已经在返回的JSX中使用了<Header />组件，比如：

  import Header from './Header';
  
  function App() {
    return (
      <div className="App">
        <Header />
        {/* 其他自定义内容 */}
      </div>
    );
  }
  
  export default App;
  

  如果仅导入Header但未在JSX中使用，页面自然不会显示对应内容。

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