React-i18next 不会在页面重新加载时加载翻译答案

【问题标题】：React-i18next does not load translations on page reloadReact-i18next 不会在页面重新加载时加载翻译
【发布时间】：2021-06-22 07:05:30
【问题描述】：

我在我的 nextjs 应用程序中使用 react-I18next。我不想使用 next-I18next 因为我尝试使用它但无法使其工作。但是 react-i18next 目前正在我的应用程序中工作，我可以将语言从英语更改为德语并返回。但是，如果我重新加载页面，我会收到此错误。

TypeError: i18n.changeLanguage 不是函数

此错误的可能原因是什么，我该如何解决？ P.S 在我的 app.ts 文件中，我没有使用 Suspense，因为它给了我这个错误

ReactDOMServer 还不支持 Suspense。

这是我的 i18.ts 文件

/* eslint-disable no-duplicate-imports */
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';

import loginDE from '../../public/locales/de/loginDE.json';
import loginEN from '../../public/locales/en/loginEN.json';

// the translations
// (tip move them in a JSON file and import them)
const resources = {
  en: {
    translation: loginEN,
  },
  de: {
    translation: loginDE,
  },
};

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

export default i18n;

【问题讨论】：

任何帮助将不胜感激
您需要创建一个可重现的示例...顺便说一句。 next-i18next 是专门为 next.js 应用程序设计的，所以我建议你再试一次... 仅供参考：这里有一个使用自定义 i18next 后端的示例：github.com/locize/next-i18next-locize

标签： reactjs internationalization next.js i18next react-i18next

【解决方案1】：

ReactDOMServer 还不支持 Suspense。

像这样更改您的 useSuspense 值：

react: { useSuspense: false },

TypeError: i18n.changeLanguage 不是函数

确保您使用 I18nextProvider

包装了组件

【讨论】：