React 要求自定义组件名必须以大写字母开头，否则 JSX 会将其识别为原生 HTML 标签（如 ），而 并非合法 HTML 元素，导致渲染为空白。

react 要求自定义组件名必须以大写字母开头，否则 jsx 会将其识别为原生 html 标签（如 `

`），而 `` 并非合法 html 元素，导致渲染为空白。

在 React 中，JSX 对大小写极为敏感：以小写字母开头的标签（如 <home></home>、<mycomponent></mycomponent>）会被 React 解析为 DOM 原生元素（即等同于 <home></home> 这类未定义的 HTML 标签），浏览器忽略渲染，最终页面留白；而以大写字母开头的标签（如 <home></home>、<mycomponent></mycomponent>）才会被识别为 React 自定义组件并正确实例化。

你提供的代码中存在两处关键错误：

1. 组件导入命名不规范：

   import home from "./pages/home/home"; // ❌ 小写变量名

   应改为首字母大写的命名约定（推荐与文件/组件名一致）：

   import Home from "./pages/home/home"; // ✅ 首字母大写

2. JSX 中使用小写标签：

   

   Reactivation Specialist · 流失召回

   适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p

   下载

   return (<home/>); // ❌ 被当作 HTML 标签处理

   必须同步更新为：

   return <Home />; // ✅ 正确调用 React 组件

✅ 正确的 App.js 示例：

import Home from "./pages/home/home";

function App() {
  return <Home />;
}

export default App;

⚠️ 注意事项：

• 组件文件名（如 Home.js）建议也采用 PascalCase（首字母大写），与导出的组件名保持一致；
• 确保 Home.js 中导出的是默认函数/类组件，例如：

  // ./pages/home/home.js
  export default function Home() {
    return <h1>Welcome to the Home Page!</h1>;
  }

• 不要混用大小写：import home from ... + <home></home> 会导致引用错误（变量未定义）；
• 开发时可启用 ESLint 插件（如 eslint-plugin-react），它会自动提示 react/jsx-pascal-case 规则，预防此类问题。

总结：React 的 JSX 语法依赖命名约定来区分 HTML 元素与自定义组件——大写开头 = React 组件，小写开头 = DOM 标签。严格遵守 PascalCase 是避免“空白屏却无报错”问题最基础也最关键的实践。