[英]“i18next backendConnector: loading namespace failed” when using react-i18next useTranslationHooks
I'm trying to implement react-i18next on my create-react-app application with useTranslation() hooks. 我正在尝试使用useTranslation()钩子在我的create-react-app应用程序上实现react-i18next。
However, in the console, the debug mode shows 但是,在控制台中,调试模式显示为
i18next::backendConnector: loading namespace billingAddress for language en failed failed parsing /locales/en/billingAddress.json to json i18next :: backendConnector:为语言en加载名称空间billingAddress失败,无法将/locales/en/billingAddress.json解析为json
and 和
i18next::translator: missingKey en billingAddress Form.email Customer Email (Default) i18next :: translator:missingKey和billingAddress Form.email客户电子邮件(默认)
i18next.ts i18next.ts
import {initReactI18next} from "react-i18next";
import i18next from "i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-xhr-backend';
import XHR from "i18next-xhr-backend";
i18next
// .use(Backend)
.use(LanguageDetector)
.use(XHR)
.use(initReactI18next) // passes i18n down to react-i18next
.init({
lng: "en",
fallbackLng: {
'en-US':['en'],
'zh-CN':['cn'],
default:['en']
},
debug: true,
ns: ['billingAddress'],
defaultNS: 'billingAddress',
// load: "currentOnly",
interpolation: {
escapeValue: false // react already safes from xss
},
keySeparator: false,
// backend: {
// loadPath: "/locales/{{lng}}/{{ns}}.json",
// crossDomain: true
// },
react: {
wait: true,
}
});
export default i18next;
files 档案
├── src
│ ├── i18next.ts
│ ├── locales
│ │ ├── cn
│ │ │ └── billingAddress.ts
│ │ └── en
│ │ └── billingAddress.ts
│ ├── index.tsx
version 版
"react": "^16.8.4", “ react”:“ ^ 16.8.4”,
"i18next": "^15.0.7", “ i18next”:“ ^ 15.0.7”,
my translation file 我的翻译文件
export default{
"Form": {
"emailLabel": "customer Email",
"emailPlaceholder": "email@emial.com",
}
}
my billingAddress file 我的billingAddress文件
const [t, i18n] = useTranslation();
const changeLanguage = (language: string) => (e: React.MouseEvent) => {
i18n.changeLanguage(language)
};
const someValues: billingAddress = {
emailLabel: t("Form.emailLabel","Customer Email")
}
return (
<div>
<button onClick={changeLanguage("en")}>English</button>
<OtherComponent value={someValues} />
</div>
)
I'm quite confuse how to load namespace now... any ideas? 我很困惑现在如何加载名称空间...有什么想法吗?
Thanks in advance! 提前致谢!
You might just follow the sample here: https://github.com/i18next/react-i18next/tree/master/example/react/public/locales 您可能只在这里关注示例: https : //github.com/i18next/react-i18next/tree/master/example/react/public/locales
Using xhr backend you need to provide valid JSON files as source - that's all. 使用xhr后端,您需要提供有效的JSON文件作为源-仅此而已。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.