检测浏览器'；s语言与i18next browser languagedetector for reactJs web app_Reactjs_I18next

检测浏览器'；s语言与i18next browser languagedetector for reactJs web app

reactjs

检测浏览器'；s语言与i18next browser languagedetector for reactJs web app,reactjs,i18next,Reactjs,I18next,我有一个reactJs应用程序，我想给它添加本地化。我以前从未使用过i18next，但我正在努力适应它。我的问题是，我无法检测用户的浏览器正在使用的语言。这是我的代码，你能帮我一些代码吗？我已经搜索了这个主题的所有文档和答案，但我找不到任何解决方案这是我的i18n.js文件，我正在将其导入我想要使用的文件中 import i18next from 'i18next'; import languageDetector from 'i18next-browser-languagedetector'

我有一个reactJs应用程序，我想给它添加本地化。我以前从未使用过i18next，但我正在努力适应它。我的问题是，我无法检测用户的浏览器正在使用的语言。这是我的代码，你能帮我一些代码吗？我已经搜索了这个主题的所有文档和答案，但我找不到任何解决方案

这是我的i18n.js文件，我正在将其导入我想要使用的文件中

import i18next from 'i18next';
import languageDetector from 'i18next-browser-languagedetector';
i18next
    .use(languageDetector)
    .init({
        debug: true,
        fallbackLng: "en",
        resources: {
            en: {
                translation: {
                    "table": {
                        "fortuneId": "FortuneId",
                        "name": "Name",
                        "age": "Age",
                        "date": "Date",
                        "relationship": "Relationship",
                        "note": "Note",
                        "topic": "Topic",
                        "question": "Question",
                        "gender": "Gender",
                        "rejected": "Rejected"
                    },

                    "auth": {
                        "signIn": "Sign In",
                        "signOut": "Sign Out",
                        "joinUs": "Join Us",
                        "goBack": "Go Back",
                        "email": "E-mail",
                        "username": "Username",
                        "password": "Password",
                    },

                    "admin": {
                        "employee": "Employees",
                        "moderator": "Moderator",
                        "admin": "Admin",
                        "refreshCounters": "Refresh Counters",
                        "refreshCounter": "Refresh Counter",
                        "setAsEmployee": "Set as Employee",
                        "setAsAdmin": "Set as Admin",
                        "setAsModerator": "Set as Moderator",
                        "email": "E-mail",
                        "password": "Password",
                        "answeredFortunes": "Answered Fortunes",
                        "controlledFortunes": "Controlled Fortunes",
                    },

                    "moderator": {
                        "approve": "Approve",
                        "reject": "Reject",
                        "topic": "Topic",
                        "name": "Name",
                        "age": "Age",
                        "date": "Date",
                        "relationship": "Relationship",
                        "gender": "Gender",
                        "answer": "Answer"
                    },

                    "answer": {
                        "fortuneId": "FortuneId",
                        "name": "Name",
                        "age": "Age",
                        "date": "Date",
                        "relationship": "Relationship",
                        "note": "Note",
                        "topic": "Topic",
                        "question": "Question",
                        "gender": "Gender",
                        "send": "Send",
                        "rejectionReason": "Rejection Reason",
                        "rejection": "Rejection",
                        "rejectedAnswer": "Rejected Answer",
                        "unassign": "Unassign"
                    },

                    "modal": {
                        "fortuneId": "FortuneId",
                        "name": "Name",
                        "age": "Age",
                        "date": "Date",
                        "relationship": "Relationship",
                        "note": "Note",
                        "topic": "Topic",
                        "question": "Question",
                        "gender": "Gender",
                        "assignToMe": "Assign to Me",
                        "cancel": "Cancel"
                    },

                    "profile": {
                        "name": "Name",
                        "age": "Age",
                        "email": "E-mail",
                        "answeredFortunes": "Answered Fortunes",
                        "controlledFortunes": "Controlled Fortunes",
                        "employeeTypeAdmin": "Admin",
                        "employeeTypeModerator": "Moderator",
                        "employeeTypeEmployee": "Employee",
                    },

                    "errors": {},
                }
            },
            tr: {
                translation: {
                    "table": {
                        "fortuneId": "FalId",
                        "name": "Ad",
                        "age": "Yaş",
                        "date": "Tarih",
                        "relationship": "İlişki Durumu",
                        "note": "Not",
                        "topic": "Konu",
                        "question": "Soru",
                        "gender": "Cinsiyet",
                        "rejected": "Reddedildi"
                    },

                    "auth": {
                        "signIn": "Giriş Yap",
                        "signOut": "Çıkış Yap",
                        "joinUs": "Bize Katıl",
                        "goBack": "Geri Dön",
                        "email": "E-mail",
                        "username": "Kullanıcı Adı",
                        "password": "Şifre",
                    },

                    "admin": {
                        "employee": "Yorumcu",
                        "moderator": "Moderatör",
                        "admin": "Admin",
                        "refreshCounters": "Sayaçları Sıfırla",
                        "refreshCounter": "Sayacı Sıfırla",
                        "setAsEmployee": "Yorumcu Yap",
                        "setAsAdmin": "Admin Yap",
                        "setAsModerator": "Moderatör Yap",
                        "email": "E-mail",
                        "password": "Şifre",
                        "answeredFortunes": "Gönderilen Fallar",
                        "controlledFortunes": "Kontrol Edilen Fallar",
                    },

                    "moderator": {
                        "approve": "Onayla",
                        "reject": "Reddet",
                        "topic": "Konu",
                        "name": "Ad",
                        "age": "Yaş",
                        "date": "Tarih",
                        "relationship": "İlişki Durumu",
                        "gender": "Cinsiyet",
                        "answer": "Fal Gönderi"
                    },

                    "answer": {
                        "fortuneId": "FalId",
                        "name": "Ad",
                        "age": "Yaş",
                        "date": "Tarih",
                        "relationship": "İlişki Durumu",
                        "note": "Not",
                        "topic": "Konu",
                        "question": "Soru",
                        "gender": "Cinsiyet",
                        "send": "Gönder",
                        "rejectionReason": "Reddedilme Nedeni",
                        "rejection": "Reddedilme",
                        "rejectedAnswer": "Reddedilen Gönder",
                        "unassign": "Fal'ı Bırak"
                    },

                    "modal": {
                        "fortuneId": "FalId",
                        "name": "Ad",
                        "age": "Yaş",
                        "date": "Tarih",
                        "relationship": "İlişki Durumu",
                        "note": "Not",
                        "topic": "Konu",
                        "question": "Soru",
                        "gender": "Yaş",
                        "assignToMe": "Bana Ata",
                        "cancel": "İptal"
                    },

                    "profile": {
                        "name": "Ad",
                        "age": "Yaş",
                        "email": "E-mail",
                        "answeredFortunes": "Gönderilen Fallar",
                        "controlledFortunes": "Kontrol Edilen Fallar",
                        "employeeTypeAdmin": "Admin",
                        "employeeTypeModerator": "Moderatör",
                        "employeeTypeEmployee": "Yorumcu",
                    },

                    "errors": {},
                }
            }
        }
    });

export default i18next;

   import i18next from "../../Localization/i18n";
   <div>
     {i18next.t('table.question')}
   </div>

在这些文件中，我像这样使用它

import i18next from 'i18next'; import languageDetector from 'i18next-browser-languagedetector'; i18next .use(languageDetector) .init({ debug: true, fallbackLng: "en", resources: { en: { translation: { "table": { "fortuneId": "FortuneId", "name": "Name", "age": "Age", "date": "Date", "relationship": "Relationship", "note": "Note", "topic": "Topic", "question": "Question", "gender": "Gender", "rejected": "Rejected" }, "auth": { "signIn": "Sign In", "signOut": "Sign Out", "joinUs": "Join Us", "goBack": "Go Back", "email": "E-mail", "username": "Username", "password": "Password", }, "admin": { "employee": "Employees", "moderator": "Moderator", "admin": "Admin", "refreshCounters": "Refresh Counters", "refreshCounter": "Refresh Counter", "setAsEmployee": "Set as Employee", "setAsAdmin": "Set as Admin", "setAsModerator": "Set as Moderator", "email": "E-mail", "password": "Password", "answeredFortunes": "Answered Fortunes", "controlledFortunes": "Controlled Fortunes", }, "moderator": { "approve": "Approve", "reject": "Reject", "topic": "Topic", "name": "Name", "age": "Age", "date": "Date", "relationship": "Relationship", "gender": "Gender", "answer": "Answer" }, "answer": { "fortuneId": "FortuneId", "name": "Name", "age": "Age", "date": "Date", "relationship": "Relationship", "note": "Note", "topic": "Topic", "question": "Question", "gender": "Gender", "send": "Send", "rejectionReason": "Rejection Reason", "rejection": "Rejection", "rejectedAnswer": "Rejected Answer", "unassign": "Unassign" }, "modal": { "fortuneId": "FortuneId", "name": "Name", "age": "Age", "date": "Date", "relationship": "Relationship", "note": "Note", "topic": "Topic", "question": "Question", "gender": "Gender", "assignToMe": "Assign to Me", "cancel": "Cancel" }, "profile": { "name": "Name", "age": "Age", "email": "E-mail", "answeredFortunes": "Answered Fortunes", "controlledFortunes": "Controlled Fortunes", "employeeTypeAdmin": "Admin", "employeeTypeModerator": "Moderator", "employeeTypeEmployee": "Employee", }, "errors": {}, } }, tr: { translation: { "table": { "fortuneId": "FalId", "name": "Ad", "age": "Yaş", "date": "Tarih", "relationship": "İlişki Durumu", "note": "Not", "topic": "Konu", "question": "Soru", "gender": "Cinsiyet", "rejected": "Reddedildi" }, "auth": { "signIn": "Giriş Yap", "signOut": "Çıkış Yap", "joinUs": "Bize Katıl", "goBack": "Geri Dön", "email": "E-mail", "username": "Kullanıcı Adı", "password": "Şifre", }, "admin": { "employee": "Yorumcu", "moderator": "Moderatör", "admin": "Admin", "refreshCounters": "Sayaçları Sıfırla", "refreshCounter": "Sayacı Sıfırla", "setAsEmployee": "Yorumcu Yap", "setAsAdmin": "Admin Yap", "setAsModerator": "Moderatör Yap", "email": "E-mail", "password": "Şifre", "answeredFortunes": "Gönderilen Fallar", "controlledFortunes": "Kontrol Edilen Fallar", }, "moderator": { "approve": "Onayla", "reject": "Reddet", "topic": "Konu", "name": "Ad", "age": "Yaş", "date": "Tarih", "relationship": "İlişki Durumu", "gender": "Cinsiyet", "answer": "Fal Gönderi" }, "answer": { "fortuneId": "FalId", "name": "Ad", "age": "Yaş", "date": "Tarih", "relationship": "İlişki Durumu", "note": "Not", "topic": "Konu", "question": "Soru", "gender": "Cinsiyet", "send": "Gönder", "rejectionReason": "Reddedilme Nedeni", "rejection": "Reddedilme", "rejectedAnswer": "Reddedilen Gönder", "unassign": "Fal'ı Bırak" }, "modal": { "fortuneId": "FalId", "name": "Ad", "age": "Yaş", "date": "Tarih", "relationship": "İlişki Durumu", "note": "Not", "topic": "Konu", "question": "Soru", "gender": "Yaş", "assignToMe": "Bana Ata", "cancel": "İptal" }, "profile": { "name": "Ad", "age": "Yaş", "email": "E-mail", "answeredFortunes": "Gönderilen Fallar", "controlledFortunes": "Kontrol Edilen Fallar", "employeeTypeAdmin": "Admin", "employeeTypeModerator": "Moderatör", "employeeTypeEmployee": "Yorumcu", }, "errors": {}, } } } }); export default i18next;

import i18next from "../../Localization/i18n"; <div> {i18next.t('table.question')} </div>

从“../../Localization/i18n”导入i18next； {i18next.t（'table.question'）}
这显示了我在网页上的“问题”，但如果我把我的谷歌浏览器改成土耳其语，它仍然是英语的。我不知道我错过了什么

感谢您的帮助
游戏进行得有点晚，但希望能对社区有益，我最近开始使用
react-i18next
，也遇到了这个问题。我发现它有一个子链接，指向源代码中的这一行：

这表明，如果在没有任何参数的情况下调用
changeLanguage（）
，它将尝试根据您配置的优先级执行语言检测。因此，要使其正常工作，我需要执行以下操作：

i18n .use(LanguageDetector) .use(initReactI18next) // passes i18n down to react-i18next .init({ resources, lng: "en", detection: detectOptions, interpolation: { escapeValue: false // react already safes from xss } }); //*** call without param to use language detector i18n.changeLanguage()
执行此操作后，URL查询参数现在可以工作，例如：

www.example.com/route/？lng=tr
希望这对将来的人有所帮助。我尝试了上面@Ergin的答案，但没有成功，当我使用此建议时，Typescript在传递
0参数时抛出了错误： //*** call without param to use language detector i18n.changeLanguage() 文档并没有完全告诉您如何设置检测，然后我发现有几个人问了一个合理的问题，维护人员的回答有点粗鲁，但碰巧提供了一个文档中应该包含的问题。它解决了我的问题，对当前文档中的说明做了一些小的调整然后，我可以通过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 这对我有帮助（感谢：）请尝试白名单：['en'，'tr'，]，选项不工作：/chrome，但它会显示“问题”。它应该是土耳其语的“Soru”@xadmload:'languageOnly'，表示排除区域；检测到的lng可以缓存，存储在cookie/localstorage中。。。清除cookie，使用uri？lng=LANGUAGE，其他浏览器/机器。。。它已经可以正常工作了，但是欺骗了你。有没有可能禁用cach、localstroge、cookie检查？我也不明白“？lng=语言”这句话：/你能举个例子吗？顺便说一句，感谢您的关心：）@xadmwww.example.com/route/？lng=tr到目前为止，我还无法使基于浏览器语言的语言检测成功工作，但是：（因此，这仍然不起作用。如果有人有任何想法，将不胜感激。谢谢！这个答案非常有用！ import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import XHR from "i18next-http-backend"; import LanguageDetector from "i18next-browser-languagedetector"; import translationEn from "../src/lang/translation.en.json"; import translationKo from "../src/lang/translation.ko.json"; const languages = ["en", "ko"]; // (*) const resource = { en: { translation: translationEn, }, ko: { translation: translationKo, }, }; i18n .use(XHR) .use(initReactI18next) .use(LanguageDetector) .init({ // detection: options, detection: { order: ["path", "navigator"] }, fallbackLng: "en", resources: resource, whitelist: languages, //lng: "ko", // ns: ['translation'], // defaultNS: "translation", debug: true, keySeparator: false, // we do not use keys in form messages.welcome interpolation: { escapeValue: false, // react already safes from xss }, }); export default i18n;