使用i18next-browser-languagedetector检测浏览器的语言以用于reactJs Web应用程序

问题描述 投票:0回答:1

我有一个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>

这会在网页上显示“问题”,但如果我将Google chrome浏览器更改为土耳其语,则仍为英语。我不知道我在想什么。

谢谢您的帮助

reactjs i18next
1个回答
0
投票

游戏晚了一点,但希望能使社区受益。我最近开始使用react-i18next,也遇到了这个问题。我发现此post具有一个指向源代码中此行的子链接:

https://github.com/i18next/i18next/blob/ee3afd8e5d958e8d703a208194e59fa5228165fd/src/i18next.js#L189

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

这表明,如果不带任何参数调用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

© www.soinside.com 2019 - 2024. All rights reserved.