react-i18next：我如何获取不是我当前选择的语言的文本？

Question

我有以下问题：我使用i18next react，也使用i18next后端加载我的翻译文件。我有一个语言切换器，我不仅想用它来改变语言，还想用它来改变URL。但是，在更改语言之前，我需要访问新语言的命名空间“路由”。我该怎么做？

这是我的国际化配置：

i18n
  .use(initReactI18next)
  .use(detector)
  .use(HttpApi)
  .init({
    defaultNS: 'routes',
    fallbackLng: ['de'],
    supportedLngs: ['de', 'en'],

    detection: {
      order: ['path'],
      lookupFromPathIndex: 0,
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },

    keySeparator: false,

    interpolation: {
      format,
    },
  });

export default i18n;

我的语言选择器使用这个函数：

changeLanguage = (ln) => {
  const routes = i18n.getResourceBundle(i18n.language, 'routes');
  const currentPathname = window.location.pathname.replace(/\/+$/, '');
  let currentRouteKey = Object.keys(routes).find((key) => routes[key] === currentPathname);
  if (ln === 'en' && currentPathname === '') {
    currentRouteKey = '/en';
  }
  window.location.replace(this.props.t('routes:' + currentRouteKey, { lng: ln }));
};

德语是我的后备语言，当我从应用程序的英文版本开始时，语言更改会起作用，但是当我从德语版本开始时，它不起作用。我想这是因为英文文件没有加载。如何触发此文件？

Answer 1

代替整页重新加载（使用location.replace），您可以触发i18next.changeLangauge来更改语言，在后台库将加载缺失的语言，然后您可以使用历史Api来更改URL。

// pseudo code

changeLanguage = (ln) => {
  i18n.changeLanguage(lng, (err) => {
      if (err) {
        // handle language change error
      }

      const pathnameParts = window.location.pathname.split("/");
      const currentLangPath = pathnameParts[1]; // skips the first slash
      let newPathnameParts = pathnameParts;
      if (i18n.options.supportedLngs.includes(currentLangPath)) {
        newPathnameParts = newPathnameParts.slice(2); // removes the lang part
      }

      newPathnameParts = [lngSubPaths[lng]].concat(
        newPathnameParts.filter(Boolean)
      );

      const newPathname = newPathnameParts.join("/");

      if (newPathname !== window.location.pathname) {
        window.history.pushState(null, "", newPathname);
      }
    });
};

工作代码和盒子示例