使用React SPA Prerender时HomeTitleContainer类意外出现在所有页面

问题描述 #

使用React SPA Prerender优化SEO时，仅在首页Home.jsx中定义并使用的HomeTitleContainer类对应的div元素，被意外插入到所有预渲染生成的HTML文件中（例如课程页cours.html），位置处于MainTitle与TableOfContents元素之间。

排查与解决步骤 #

• 检查全局布局/公共组件的条件渲染逻辑
  最常见的原因是根布局组件（如Layout.jsx）或全局公共组件中，未添加路由判断就渲染了首页专属元素。例如错误写法：

  // 错误：无路由判断，所有页面都会渲染该元素
  <div className="HomeTitleContainer">首页专属标题容器</div>
  

  修正为基于路由的条件渲染（以react-router-dom为例）：

  import { useLocation } from 'react-router-dom';
  
  const Layout = ({ children }) => {
    const { pathname } = useLocation();
    return (
      <div className="layout-wrapper">
        {/* 仅在首页渲染该容器 */}
        {pathname === '/' && <div className="HomeTitleContainer">首页专属标题容器</div>}
        <MainTitle />
        <TableOfContents />
        {children}
      </div>
    );
  };
  

• 校验.rsp.json预渲染配置
  打开项目根目录的.rsp.json文件，检查routes数组中的每个路由配置：

  • 确认非首页路由未错误引用Home.jsx作为入口组件
  • 检查是否存在全局注入DOM元素的配置项，导致首页元素被强制插入所有页面

• 清理预渲染缓存
  删除项目的build、dist或预渲染工具生成的缓存目录（如prerendered），重新执行预渲染构建命令，避免旧缓存产物导致的元素残留。

• 确认样式/组件隔离有效性
  如果使用CSS Modules，确保HomeTitleContainer是通过模块导入的（import styles from './Home.module.css'），而非全局CSS；同时确认Home.jsx中的该元素未被错误导出到全局公共组件中。

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