React i18next 产生“文本内容与服务器呈现的 html 不匹配”错误

Question

我正在尝试为我的 React 项目正确实施 i18next。但是由于我在我的组件中使用翻译，我得到了错误：文本内容与服务器呈现的 html 不匹配。 总的来说一切正常，我得到了正确的翻译并且可以切换语言。只是错误，我不知道如何解决。我查看了几乎所有类似的问题，但没有解决方案接缝工作。

我的 i18n.ts 文件如下所示：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

import translations_de_DE from '../../public/locales/de_DE/translation.json';
import translations_en_US from '../../public/locales/en_US/translation.json';

const resources = {
  // later we can fetch them from remote or so
  de_DE: { translation: translations_de_DE },
  en_US: { translation: translations_en_US },
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .use(LanguageDetector)
  .use(Backend)
  .init({
    resources,
    // lng: "de_DE",
    fallbackLng: 'de_DE',
    keySeparator: false, // we do not use keys in form messages.welcome
    interpolation: { escapeValue: false }, // react already safes from xss
  });

export default i18n;

我的 index.tsx（以简化的方式）：

import './i18n';
import { useTranslation } from 'next-i18next';

const Home = () => {
  const { t } = useTranslation();

  return (
          <div>
            {t<string>('project_plural')}
          </div>
  );
};
export default Home;

My Settings.tsx（用户可以在其中更改语言）：

import React, { Suspense, useEffect, useState } from 'react';
import i18n from 'i18next';
import { useTranslation } from 'next-i18next';

const Settings = () => {
  const { t } = useTranslation();
  const [language, setLanguage] = useState('');

  const changeLanugage = (event: any) => {
    i18n.changeLanguage(event.target.value);
    setLanguage(event.target.value);
  };

  useEffect(() => {
    if (currentTheme === 'dark') {
      setDarkMode(true);
    }
    const localLanguage = localStorage.getItem('i18nextLng');
    setLanguage(localLanguage ? localLanguage : 'de_DE');
  }, []);

  return (
        <select
          value={language}
          onChange={changeLanugage}
        >
          <option value="en_US">English</option>
          <option value="de_DE">Deutsch</option>
        </select>
  );
};

export default Settings;