React SSR页面hydrate报错：Target Container Not a DOM Element求助

• 确保客户端代码在DOM加载完成后执行
  客户端的hydrate/render代码如果在DOM未完全解析时运行，会找不到目标容器。可以把代码放在DOMContentLoaded事件回调里，或者将脚本标签放在<body>末尾：

  document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('con');
    if (container) {
      ReactDOM.hydrateRoot(container, <YourAboutComponent />);
    }
  });
  

• 核对SSR与客户端的容器ID一致性
  检查服务器端渲染的HTML模板中，目标容器的ID是否确实是con（ID区分大小写），确保服务器端将SSR内容正确注入到该容器内，比如服务器端模板应包含：

  <div id="con"><!-- SSR渲染的内容 --></div>
  

• 使用React 18+的正确Hydrate API
  如果你用的是React 18或更高版本，必须使用hydrateRoot替代旧的ReactDOM.hydrate或ReactDOM.render，避免兼容性问题：

  import { hydrateRoot } from 'react-dom/client';
  
  const container = document.getElementById('con');
  if (container) {
    hydrateRoot(container, <YourAboutComponent />);
  }
  

  增加容器存在的判断，避免找不到元素时抛出错误。

• 验证客户端DOM中容器的存在性
  在浏览器控制台执行document.getElementById('con')，确认元素是否存在。如果不存在，检查是否有其他脚本在客户端代码执行前修改/删除了该容器，或者服务器端渲染的HTML是否完整输出了这个div。

• 核对路由与组件匹配
  确保about页面的SSR路由和客户端路由对应，服务器端渲染的组件与客户端hydrate的组件是同一个，避免因组件不匹配导致的容器定位问题。

内容的提问来源于stack exchange，提问作者Theophilus Timothy Ruben