React i18next 和更改语言的正确方法

Question

我正在使用 React i18next 和 i18next-browser-languagedetector 开发多语言应用程序。

我通过以下方式初始化 i18next：

 i18n
  .use(LanguageDetector)
  .init({
    lng: localStorage.getItem(I18N_LANGUAGE) || "pt",
    fallbackLng: "pt",
    resources: {
      en: stringsEn,
      pt: stringsPt
    },
    detection: {
      order: ["localStorage", "navigator"],
      lookupQuerystring: "lng",
      lookupLocalStorage: I18N_LANGUAGE,
      caches: ["localStorage"]
    }
  });

export default i18n;

我已经实现了一个语言选择器，它只是将 localStorage 中的值更改为用户选择的值。

这是正确的做法吗？

我问是因为即使这有效，我觉得我通过设置 localStorage.getItem(I18N_LANGUAGE) || "pt" “作弊”，而且我没有按我应该的方式使用语言检测。

原文由 pteixeira 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据 文档，您不需要自己指定语言：

 import i18next from 'i18next';
import LngDetector from 'i18next-browser-languagedetector';

i18next
  .use(LngDetector)
  .init({
    detection: options
  });

根据 i18next 中的 这段源代码，它确实使用了插件的检测功能：

if (!lng && this.services.languageDetector) lng = this.services.languageDetector.detect();

这是正确的做法吗？

所以，不，不是。让插件完成它的工作。 :)

原文由 Guilherme Rodrigues 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

希望这对将来的人有帮助。该文档并没有完全向您提供如何设置检测的全貌，然后我发现了一个 已关闭的 Github 问题，其中有几个人提出了一个合理的问题，维护人员的回答有点粗鲁，但也碰巧提供了一个应该在文档中的 链接- 但绝对没有在 Github 评论之外的任何地方引用。该示例通过对当前文档说明的内容进行一些小的调整，解决了我的问题。

然后，我可以使用 https:www.domain.com?lng=es 在我的 url 中进行语言检测，以及使用允许我更改浏览器语言的浏览器扩展时。

这是我的工作 i18n.ts 文件：

 import i18n from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import XHR from "i18next-http-backend" // <---- add this

import commonDe from './locales/de/common.json'
import commonEn from './locales/en/common.json'
import commonEs from './locales/es/common.json'
import commonFr from './locales/fr/common.json'

const resources = {
  de: { common: commonDe },
  en: { common: commonEn },
  es: { common: commonEs },
  fr: { common: commonFr }
}

const options = {
  order: ['querystring', 'navigator'],
  lookupQuerystring: 'lng'
}

i18n
  .use(XHR) // <---- add this
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // lng: 'en' // <--- turn off for detection to work
    detection: options,
    resources,
    ns: ['common'],
    defaultNS: 'common',
    fallbackLng: 'en',
    supportedLngs: ['de', 'en', 'es', 'fr'],
    interpolation: {
      escapeValue: false,
    },
    debug: false,
  })

export default i18n

（奖金帮助 - 如果有人卡在这部分）

我在 Next.js 项目中工作，上面的文件被加载到 project-root/pages/_app.tsx 文件中，如下所示：

 import React from 'react'
import { AppProps } from 'next/app'
import '../i18n/i18n'

import '../public/styles.css'

const TacoFridayApp = ({ Component, pageProps}: AppProps): JSX.Element => {

  return <Component {...pageProps} />
}

export default TacoFridayApp

原文由 taco_friday 发布，翻译遵循 CC BY-SA 4.0 许可协议