React 要求自定义组件名必须以大写字母开头，否则 JSX 会将其识别为原生 HTML 标签（如 ），而 并非合法 HTML 元素，导致渲染为空白。 React 要求自定义组件名必须以大写字母开头，否则 JSX 会将其识别为原生 HTML 标签（如 ``），而 `` 并非合法 HTML 元素，导致渲染为空白。在 React 中，JSX 对大小写极为敏感：以小写字母开头的标签（如 、）会被 React 解析为 DOM 原生元素（即等同于 这类未定义的 HTML 标签），浏览器忽略渲染，最终页面留白；而以大写字母开头的标签（如 、）才会被识别为 React 自定义组件并正确实例化。你提供的代码中存在两处关键错误：组件导入命名不规范： import home from "./pages/home/home"; // ❌ 小写变量名应改为首字母大写的命名约定（推荐与文件/组件名一致）：import Home from "./pages/home/home"; // ✅ 首字母大写JSX 中使用小写标签： return (); // ❌ 被当作 HTML 标签处理必须同步更新为：return ; // ✅ 正确调用 React 组件✅ 正确的 App.js 示例：import Home from "./pages/home/home"; function App() { return ; } export default App;⚠️ 注意事项：组件文件名（如 Home.js）建议也采用 PascalCase（首字母大写），与导出的组件名保持一致；确保 Home.js 中导出的是默认函数/类组件，例如：// ./pages/home/home.js export default function Home() { return Welcome to the Home Page!; }不要混用大小写：import home from ... + 会导致引用错误（变量未定义）；开发时可启用 ESLint 插件（如 eslint-plugin-react），它会自动提示 react/jsx-pascal-case 规则，预防此类问题。总结：React 的 JSX 语法依赖命名约定来区分 HTML 元素与自定义组件——大写开头 = React 组件，小写开头 = DOM 标签。严格遵守 PascalCase 是避免“空白屏却无报错”问题最基础也最关键的实践。