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

Question

我遇到以下问题：我使用 i18next 进行反应，还使用 i18next-backend 加载我的翻译文件。我有一个 languageSwitcher，我不仅要用它来更改语言，还要更改 URL。但是我需要在更改语言之前访问新语言的命名空间'routes'。我该怎么做？

这是我的 i18n 配置：

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

您可以触发 i18next.changeLangauge to change the language, at the background the lib will load the missing language, and then you can use the History Api 来更改 URL。

而不是重新加载整页（使用 location.replace）

// 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);
      }
    });
};

工作codesandbox example

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

react-i18next: How can I get text in a language, that is not my current selected one?

i18next

reactjs

react-i18next