水合失败，因为初始 UI 与服务器上呈现的内容不匹配 - 在实现 Remix i18n 翻译后

Question

我已经使用 Remix i18n 包在我的 Remix 应用程序中实现了翻译。到目前为止，当我有一个从特定名称空间加载翻译的父组件时，一切正常。

但是，当我使用也从指定 JSON 文件加载其翻译的子组件时，我遇到了水合错误。 有趣的是，如果我不在子组件中使用翻译，错误就会停止发生。

这是父组件：

import { Card } from "@shopify/polaris";
import { Spacer } from "../components/globalComponents"
import HaveQuestionsCard from "../components/HaveQuestionsCard";


// i18n imports and configurations
import { useTranslation } from "react-i18next";
export let handle = { i18n: "testHome" };   // Loading the translation from "testHome" namespace


export default function TestHome() {

  let { t } = useTranslation("testHome");

  return (
    <>
      <Spacer height={"10rem"} />
      <Card>
        <h1>
          {t("title")}
        </h1>
      </Card>

      <Spacer height={"2rem"} />

      <HaveQuestionsCard />
    </>
  )
}

这是子组件：

import { Card, Text, InlineStack, Link } from "@shopify/polaris";
import { Spacer } from "./globalComponents";
import SupportImg from "../media/bundle/support.svg";

// i18n imports and configurations
import { useTranslation } from "react-i18next";
export let handle = { i18n: "haveQuestionsCard" };     // Loading the specific "haveQuestionsCard" namespace


export default function HaveQuestionsCard() {

   // Loading the function to load the translation.
  let { t } = useTranslation("haveQuestionsCard");

  return (
    <Card>
      <InlineStack gap={"200"}>
        <Text as="h2" variant="headingMd">
          {t("title")}
        </Text>

        <img alt="" width="8%" height="8%"
          style={{
            objectFit: "cover",
            objectPosition: "center",
          }}
          src={SupportImg}
        />
      </InlineStack>

      <Spacer />

      <Text as="p" variant="bodyMd">
        {t("details")}
      </Text>

      {/* <Spacer /> */}

      <Link monochrome url="#">
        <Text as="h2" variant="bodyMd" fontWeight="medium" tone="subdued">
          {t("link")}
        </Text>
      </Link>
    </Card>
  );
}

错误如下所示：

这个错误变得如此令人沮丧，任何帮助将非常感激。谢谢。

Answer 1

在混音应用程序中遇到类似的问题，需要进一步挖掘，但正在努力

export const handle = 
i18n: [ ...some namespaces ],

在 root.tsx 文件中（添加我在有问题的页面上使用的命名空间）使控制台错误消失