我正在尝试使用 useTranslation() 挂钩在我的 create-react-app 应用程序上实现 react-i18next。
但是,在控制台中,调试模式显示
i18next::backendConnector: 为语言加载命名空间 billingAddress 失败 将 /locales/en/billingAddress.json 解析为 json 失败
和
i18next::translator: missingKey en billingAddress Form.email 客户电子邮件(默认)
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;
文件
├── src
│ ├── i18next.ts
│ ├── locales
│ │ ├── cn
│ │ │ └── billingAddress.ts
│ │ └── en
│ │ └── billingAddress.ts
│ ├── index.tsx
版本
“反应”:“^16.8.4”,
"i18next": "^15.0.7",
我的翻译文件
export default{
"Form": {
"emailLabel": "customer Email",
"emailPlaceholder": "email@emial.com",
}
}
我的帐单地址文件
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>
)
我现在很困惑如何加载命名空间......有什么想法吗?
提前致谢!