Remix 应用程序 - 错误：缩小 React 错误 #418 / #423 - Google Analytics gtag 脚本

Question

我有一个混音应用程序（SSR）。当我为谷歌分析添加脚本时，它显示生产中的水合错误，尤其是与

gtag('js', new Date())

有人知道添加此脚本或删除此错误的另一种方法吗？

我尝试添加

suppressHydrationWarning={true}

但仍然有错误消息

Answer 1

Remix 在服务器和客户端上渲染您的 UI 组件，因此像

new Date()

这样的表达式将导致水合作用不匹配。

解决此问题的一种方法是强制 Remix 仅在客户端上渲染脚本标签。您可以使用

remix-utils

<ClientOnly>

组件。

<ClientOnly>
  {() => <script dangerouslySetInnerHtml={{_html:`...`}} />}
</ClientOnly>