React JS项目无控制台报错却无输出的常见场景有哪些

• 根节点挂载错误：检查React 18+的createRoot或旧版本ReactDOM.render的挂载目标是否和HTML文件里的DOM节点匹配，最常见的是document.getElementById('root')对应的<div id="root"></div>在HTML中漏写、id拼写错误，导致React没有可挂载的容器，自然无内容输出。
• 样式导致内容不可见：属于视觉层面问题，不会触发JS报错，常见场景包括：根节点/App组件被设置了display: none、opacity: 0、宽高为0、z-index为负数被其他元素遮挡，或者文字颜色和背景色完全一致，可以给根节点加临时的高亮边框确认节点是否真实存在。
• 条件渲染逻辑错误：根组件或入口组件的条件渲染判断写反、缺少兜底分支，比如{isLogin && <Home />}中isLogin初始值为假，且没有写未登录状态下的渲染内容，整个组件就会返回空。
• 路由配置问题：使用React Router等路由库时，根路径/没有配置对应的渲染组件、路由守卫拦截了所有访问跳转到无内容的404页面、路由匹配模式设置错误导致无命中路由，也会出现无内容的情况。
• 组件导出导入不匹配：比如App组件是默认导出，导入时写成了具名导入import { App } from './App'，反之同理，这种情况导入的组件值为undefined，新版本React渲染undefined不会抛出错误，只会渲染空白。
• 入口文件逻辑缺失：入口文件中仅创建了根实例但漏写了.render(<App />)调用，或者传入render方法的组件本身就是空组件、所有JSX内容被注释。
• 生产构建配置错误：生产环境部署时出现空白，大多是打包工具的publicPath配置错误导致资源加载路径异常，或者入口文件配置错误，没有正确加载业务代码。

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