React 要求自定义组件名必须以大写字母开头，否则 JSX 会将其识别为原生 HTML 标签（如 ），而 并非合法 HTML 元素，导致组件被忽略、页面空白且无报错。 React 要求自定义组件名必须以大写字母开头，否则 JSX 会将其识别为原生 HTML 标签（如 ``），而 `` 并非合法 HTML 元素，导致组件被忽略、页面空白且无报错。在 React 中，JSX 对大小写极为敏感——这是初学者最容易踩坑的关键规则之一。当你写 时，React 编译器会认为这是一个类似 或 的内置 HTML 标签，而非你定义的 React 组件。由于浏览器中不存在 这个标准 HTML 元素，该标签会被静默忽略，最终渲染结果为空白，且控制台不会抛出错误（因为语法本身合法）。✅ 正确做法是：始终使用 PascalCase（首字母大写）命名自定义组件，并确保 import 和 JSX 中的引用名完全一致。以你的代码为例，修正步骤如下：重命名组件文件与导出函数名（推荐） 将 ./pages/home/home.js 中的组件定义改为：// ./pages/home/home.js import React from 'react'; function Home() { return Welcome to the Home Page!; } export default Home;更新 App.js 中的导入与使用方式 // App.js import Home from './pages/home/home'; // ✅ 首字母大写，匹配导出 function App() { return ; // ✅ JSX 标签首字母大写 } export default App;⚠️ 注意事项：import home from ... 是错误的：小写 home 违反命名约定，且与组件实际名称不匹配；不要写 import { home } from ... 或 import * as home from ... —— 默认导出应直接用 import Home from ...；如果使用命名导出（如 export const Home = () => ...），则需 import { Home } from ...，但依然要求 JSX 中为 ； 中的 H 大写是强制性语法约定，不是风格偏好。? 小技巧：在 VS Code 中启用 ESLint + eslint-plugin-react，它会实时提示 “Component name should always start with a capital letter”。总结：React 通过首字母大小写区分原生 HTML 元素与自定义组件。牢记 “小写是 DOM 标签，大写是 React 组件” 这一原则，可避免 80% 的空白页问题。修正命名后，重新保存文件，Vite/webpack 会自动热更新，组件即可正常渲染。