i18next-browser-languageDetector 路径不起作用答案

【问题标题】：i18next-browser-languageDetector path not workingi18next-browser-languageDetector 路径不起作用
【发布时间】：2019-02-04 11:07:56
【问题描述】：

我在根据路径检测语言时遇到问题，即 http://localhost:3000/en 或 http://localhost:3000/en/subpage 应该将我的页面翻译成英文。我可以通过单击按钮并调用 i18n.changeLanguage('en') 来翻译它，但检测器似乎不起作用。

import i18n from "i18next";
import { reactI18nextModule } from "react-i18next";
import LngDetector from "i18next-browser-languagedetector";
import backend from "i18next-xhr-backend";


const detectionOptions = {
    order: ['path', 'cookie', 'navigator', 'localStorage', 'subdomain', 'queryString', 'htmlTag'],
    lookupFromPathIndex: 0

}


i18n
    .use(LngDetector)
    .use(backend)
    .use(reactI18nextModule) // passes i18n down to react-i18next
    .init({
        ns: ['translation', 'main'],
        defaultNS: 'translation',
        lng: "pl",
        fallbackLng: 'pl',
        detection: detectionOptions,
        keySeparator: false, // we do not use keys in form messages.welcome

        interpolation: {
            escapeValue: false // react already safes from xss
        },
        debug: true,
        react: {
            wait: true
        }
    }, (err, t) => {
        if (err)
            console.error(err)
    });


export default i18n;

【问题讨论】：

标签： internationalization i18next react-i18next

【解决方案1】：

解决方案：使用语言检测器时不应设置 i18n.lng 属性

【讨论】：

queryString -> 查询字符串

【解决方案2】：

i18next-browser-languagedetector 的 order 选项也有问题。当同时启用 queryString 和 path optoin 时，它将无法正常工作。它总是会读取路径并忽略查询部分。

我的代码如下所示。但我想这是一个插件问题？从“i18next”导入 i18next；从“i18next-browser-languagedetector”导入 LanguageDetector；

const detectionOptions = {
  order: ["queryString", "path", "cookie"],
  lookupFromPathIndex: 0,
  lookupQuerystring: "lng",
  lookupCookie: "meine_nanny_i18next",
};

i18next.use(LanguageDetector).init({
  fallbackLng: "de",
  resources: {
    de: {
      common: require("../locales/de/common.json"),
    },
    en: {
      common: require("../locales/en/common.json"),
    },
  },
  ns: ["common"],
  defaultNS: "common",
  detection: detectionOptions,
  returnObjects: true,
  debug: process.env.NODE_ENV === "development",
  interpolation: {
    escapeValue: false, // not needed for react!!
  },
  react: {
    wait: true,
  },
});

i18next.languages = ["de", "en"];

export default i18next;

【讨论】：

【解决方案3】：

希望这对将来的某人有所帮助。文档并没有完全为您提供如何设置检测的全貌，然后我找到了一个 closed Github issue，其中有几个人在问一个合理的问题，维护人员的回答有点粗鲁，但也碰巧提供了一个link 应该在文档中。它解决了我的问题，对当前文档说明的内容进行了一些小调整。

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

这是我的工作 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

【讨论】：

感谢您的回答。这对我很有用，因为我一直在寻找查询字符串参数，而你给了我一个我很难找到的示例 lng=es。

【解决方案4】：

路径选项有时不起作用，因为您之前的语言值存储在浏览器缓存中并继续使用。为了解决这个问题，你应该清理缓存。您可以在应用程序 -> 本地存储中看到它。就我而言，我在 i18n.tsx 中设置了以下选项，一切正常。

detection: {
  order: ['path'],
  caches: [],
}

这一行清除缓存：

caches: []

【讨论】：