React 中组件名必须以大写字母开头，否则会被当作 HTML 原生标签处理（如 ），导致自定义组件无法识别和渲染，页面空白但无报错。 React 中组件名必须以大写字母开头，否则会被当作 HTML 原生标签处理（如 ``），导致自定义组件无法识别和渲染，页面空白但无报错。在 React 开发中，一个看似微小却极易被忽视的命名约定，常常成为新手卡壳的“隐形陷阱”：自定义组件名必须首字母大写。这是 JSX 的核心解析规则——当 React 遇到 这样的标签时，会将其视为原生 HTML 元素（类似 或 ），而浏览器标准中并不存在 标签，因此该标签被忽略，组件逻辑完全不执行，最终渲染为空白内容。你的代码中存在两处关键问题：导入语句大小写不匹配： import home from "./pages/home/home"; // ❌ 小写变量名即使文件路径正确，home 作为导入变量名虽合法，但它违背了 React 社区约定，也容易混淆组件身份。JSX 中使用小写标签： return (); // ❌ 被解析为 HTML 自定义元素，非 React 组件✅ 正确做法是：统一使用 PascalCase（大驼峰）命名组件及其导入名：// App.js import Home from "./pages/home/home"; // ✅ 首字母大写导入 function App() { return ; // ✅ JSX 中必须大写 } export default App;同时，请确保 ./pages/home/home.js 文件中导出的组件名也符合规范：// ./pages/home/home.js export default function Home() { // ✅ 组件名 Home 首字母大写 return Welcome to the Home Page!; }⚠️ 注意事项：不要写成 import { home } from ... 或 import * as home from ... —— 默认导出应直接用大写变量接收；类组件同理：class Home extends Component { ... }，且需 export default Home；内置 HTML 标签（如 、）永远小写；自定义组件永远大写——这是 JSX 解析器的硬性区分机制；重启开发服务器（如 npm start）后务必刷新浏览器，避免 HMR 缓存干扰。总结：React 不报错 ≠ 代码正确。空白屏幕常源于 JSX 解析失败，而首字母大小写正是最常见元凶。养成 PascalCase 命名习惯，既是规范，更是避坑刚需。