我有一个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浏览器更改为土耳其语,则仍为英语。我不知道我在想什么。
谢谢您的帮助
游戏晚了一点,但希望能使社区受益。我最近开始使用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