从URL导入JSON文件

Question

从URL导入JSON文件

javascriptjsonreactjsi18nextreact-i18next

3

我正在使用 react-i18next 进行翻译，目前一切都按预期工作，因为我以下面的方式本地导入翻译文件。

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { reactI18nextModule } from 'react-i18next';
import translationEN from '!json!../public/locales/en/translation.json'
import translationPT from '!json!../public/locales/pt/translation.json';

// the translations
const resources = {
  en: {
    translation: translationEN
  },
  pt: {
    translation: translationPT
  }
};

i18n
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to the react-i18next components.
  // Alternative use the I18nextProvider: https://react.i18next.com/components/i18nextprovider
  .use(reactI18nextModule)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    resources,
    fallbackLng: 'en',
    ........... Code continues

现在的挑战是，我希望能够更新翻译文件，我决定采用的实现方式是将文件放在Amazon S3上并读取它们，每当需要更新时，我会将更新后的JSON对象发送到后端服务以更新文件。

我面临的问题是如何在React项目中导入这些文件，因为如果我这样做：

import translationEN from 'https:my-s3-url/locales/en/translation.json'
import translationPT from 'https:my-s3-url/locales/en/translation.json'

它给了我一个错误。模块未找到：错误：无法解析模块'https:my-s3-url/locales/en/translation.json'。

使用i18next-xhr-backend插件，以下配置也无法工作：

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { reactI18nextModule } from 'react-i18next';


i18n
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to the react-i18next components.
  // Alternative use the I18nextProvider: https://react.i18next.com/components/i18nextprovider
  .use(reactI18nextModule)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
      backend: {
        loadPath: 'https://my-s3-bucket.s3.amazonaws.com/locales/en/translation.json'
      },
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },

    // special options for react-i18next
    // learn more: https://react.i18next.com/components/i18next-instance
    react: {
      wait: true,
      nsMode: 'default'
    },
  });

export default i18n;

任何关于最佳方法的建议都将不胜感激，谢谢 :-)

- robertrutenge

1

你已经在import中引用了i18next-xhr-backend，它会满足你的需求。为什么不使用它呢？ - Dan O

@DanO，我尝试使用它，但没有起作用。你能帮忙指导正确的使用方法吗？ - robertrutenge

你需要提供使用该后端的代码，这样我（或任何人）才能帮助你。 - Dan O

@DanO，我已经更新了问题的后端代码，谢谢。 - robertrutenge

可能是在客户端JavaScript中使用带有XHR后端的i18next的重复问题。 - Dan O

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pavel Ye · Accepted Answer

您需要在loadPath字段中提供插值的值，而不仅仅是一个字符串。并且很可能还需要将crossDomain设置为true。

backend: {
  loadPath: 'https://my-s3-bucket.s3.amazonaws.com/locales/{{lng}}/{{ns}}.json',
  crossDomain: true,
},

文档链接