reactjs - 我们如何使用 api 调用加载翻译而不是在静态 jsons 中定义它们？这如何在 React-i18next 中完成？

Question

在 React 应用程序中使用国际化时，需要使用 api 调用按需加载语言翻译文件，而不是预先定义它们。如何通过使用 React-i18next 来实现这一点？

使用 React-i18next 尝试从静态预定义文件中选取的正常翻译。尝试使用 xhr-backend 但无法找到任何示例来实现按需加载翻译相关数据的要求。

Answer 1

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import backend from 'i18next-http-backend';
import axiosInstance from './helpers/Axios';

const loadResources=async(locale:string)=> {
    return await axiosInstance().get('/translate-data/get', { params: { lang: locale } })
      .then((response) => { return response.data })
      .catch((error) => { console.log(error); });
}

const backendOptions = {
  loadPath: '{{lng}}|{{ns}}', 
  request: (options:any, url:any, payload:any, callback:any) => {
    try {
      const [lng] = url.split('|');
      loadResources(lng).then((response) => {
        callback(null, {
          data: response,
          status: 200, 
        });
      });
    } catch (e) {
      console.error(e);
      callback(null, {
        status: 500,
      });
    }
  },
};

i18n
  .use(LanguageDetector)
  .use(backend)
  .init({
    backend: backendOptions,
    fallbackLng: "en",
    debug: false,
    load:"languageOnly",
    ns: ["translations"],
    defaultNS: "translations",
    keySeparator: false, 
    interpolation: {
      escapeValue: false, 
      formatSeparator: ","
    },
    react: {
      wait: true
    }
});

export default i18n;

来自后端选项的请求用于使用 Axios 调用后端 API。