使用 i18next-http-backend 延迟加载翻译时页面闪烁

Question

我不确定这是否真的是插件和我的配置问题，或者这是否只是标准行为。

我正在使用带有 i18next-http-backend 的 react-i18next 从 public 文件夹加载翻译文件。延迟加载是一个很好的好处，但我实际上使用的是后端插件，因为文件是在外部管理的（由非程序员），我无法预先知道哪些文件存在。我不是在服务器端工作，所以我不能直接从文件系统读取。

问题：我有一个可折叠部分，其内容仅在展开部分时呈现。当该内容需要之前未加载的翻译文件时，文件的获取似乎会触发页面重新加载：它会闪烁并向上滚动。

我觉得很奇怪，因为取文件导致页面闪烁。我想 i18next 正在更新，因为它正在加载一个新的命名空间并导致闪烁。那有意义吗？如果是这样，有没有办法告诉 http 后端所有命名空间（即 /public/locales 中的所有文件名），仍然保持延迟加载？我的配置中是否遗漏了什么？

这是我的配置：

import en from './en/translation.json';
import de from './de/translation.json';

const localResources = { ...de, ...en };

const customLocalBackend = {
  type: 'backend',
  init: function (services, backendOptions, i18nextOptions) {
    /* use services and options */
  },
  read: function (language, namespace, callback) {
    callback(null, localResources[language][namespace]);
  },
};

export const i18n = i18next
  .use(initReactI18next)
  .use(ChainedBackend)
  .use(LanguageDetector)
  .init({
    lng: 'de',
    fallbackLng: 'de',
    supportedLngs: ['de','en'],
    load: 'languageOnly',
    debug: true,
    backend: {
      backends: [
        HttpBackend,        // load resources from /public folder
        customLocalBackend, // load local resources
      ],
      backendOptions: [
        {
          loadPath: '/locales/{{lng}}/{{ns}}.json',
        },
        {},
      ],
    },
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    keySeparator: false,
  });

感谢您的帮助！

Answer 1

问题是由包装完整 React 应用程序的 <React.Suspense fallback={<div />}> 引起的。当在运行时间注入一个新的翻译时，回退 div 被渲染，导致“闪烁”。我删除了包装器并在 i18n 配置中设置了 react: { useSuspense: false }，现在一切都按预期工作了。

使用 i18next-http-backend 延迟加载翻译时页面闪烁

Page flickers when lazy-loading translations with i18next-http-backend

javascript

scroll

flicker

react-i18next

i18next-http-backend