reactjs - 为什么使用 Remix 的 Indie 堆栈初始化的项目在 Devtools 中出现 Hydration failed 错误?

标签 reactjs remix.run hydration

我在学习Remix时,按照教程初始化了一个项目,但是当我打开Devtools时,我看到控制台上报了几个错误。
Warning: Did not expect server HTML to contain a <div> in <html>.
Error: Hydration failed because the initial UI does not match what was rendered on the server. *n
最可笑的是我打开了Remix的索引页而且它的首页也报了同样的错误,所以我特别好奇补水是否成功以及为什么会出现这个错误

最佳答案

这是一个well known React issue由浏览器扩展修改 DOM 引起。

It's more pronounced in Remix因为它可以滋润整个<html /> ,而不仅仅是 <div id="root" /> .

您可以通过使用未安装扩展程序(或隐身模式)的浏览器配置文件进行测试来确认是否是由浏览器扩展程序引起的。

Kiliman 在此演示了一种解决方法 https://github.com/kiliman/remix-hydration-fix其中涉及分别渲染头部和应用程序。

关于reactjs - 为什么使用 Remix 的 Indie 堆栈初始化的项目在 Devtools 中出现 Hydration failed 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75333351/

相关文章:

javascript - React inline-style 将绿色 HSL 变成白色 RGB

reactjs - 如何使用react-i18next提供的Trans组件插入两个<a>标签?

reactjs - <React.Fragment> 或 <></> 上出现流错误,但 <Fragment> 上没有流错误

重新混合如何重用路线

class - ZF2 : How to hydrate into two different classes

reactjs - React.createElement : type is invalid -- expected a string

javascript - 在没有 POST 的情况下处理 Remix.run 中的操作

reactjs - 如何在 React JS 中正确触发服务器渲染文本字段的焦点事件

forms - hydration 多个对象zf2