React中Demo组件<h1>标签不渲染，页面空白求助

核心问题：文本颜色与背景色冲突导致内容不可见 #

你的Demo组件返回的<h2>使用了text-white类，如果页面背景（如body或父容器）为白色，文字会和背景完全融合，看起来就是空白状态。

解决方法：

• 临时修改颜色类验证：把text-white替换为text-dark等深色类，比如：

  function Demo() {
    return <h2 className="fs-1 fw-500 mt-4 text-dark">Show Demo</h2>;
  }
  

• 检查全局背景设置：查看index.css或全局样式中的body背景配置，调整文本颜色与背景形成对比。

其他排查点 #

1. 确认路由访问路径：确保你访问的是正确地址，比如开发服务器地址为http://localhost:3000，则Demo页面地址应为http://localhost:3000/demo，注意路径拼写和路由配置一致。
2. Bootstrap类名有效性：你使用的fs-xxl不是Bootstrap默认字体大小类（默认是fs-1至fs-6），若未自定义该类，字体大小不会生效，但这不会导致页面空白，仅会影响样式表现。
3. 根容器验证：确认public/index.html中存在id为demo的根元素（既然登录注册页面正常，该问题概率极低）：

   <div id="demo"></div>
   

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