每当我更改名称空间时都会出现 i18next::backendConnector 问题

Question

-你好，我昨天学习了i18n，一切正常，但是每当我更改区域设置文件从 translation.json 到 otherNameSpace.json，我总是在浏览器控制台上收到此消息：

i18next::backendConnector：加载语言 en 的命名空间翻译失败解析 /locales/en/translation.json 到 json

这是我的文件结构

我的文件i18n.js:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

i18n.use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        debug: true,
        fallbackLng: "en"
    })

export default i18n;

这是我使用 useTranslation 挂钩的文件，我在其中给出了命名空间的名称 header.js:

import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';

export const Header = () => {
   const { t, i18n } = useTranslation("header");

   // on change the language
   const changeLanguage = (e) => {
      const newLange = e.currentTarget.value;
      i18n.changeLanguage(newLange)
   }

   return (
      <> 
      <select defaultValue={ localStorage.getItem("i18nextLng") || "en"} 
      className='select_lang' onChange={changeLanguage}>
         <option value="en">En</option>
         <option value="fr">Fr</option>
      </select>
      // I make translation on this button and some other elements
      <button className='btnLoginHeader'>{t("loginBtn")}</button>
      </>
   );
}

谁能告诉我我需要搜索什么或者我需要学习什么来解决这个问题？提前致谢

Answer 1

默认情况下，i18next 将 ns 和 defaultNS 选项设置为 'translation' https://www.i18next.com/overview/configuration-options#languages-namespaces-resources

如果您没有该命名空间，请将这些选项设置为不同的值，即：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

i18n.use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        debug: true,
        fallbackLng: "en",
        ns: ["header"],
        defaultNS: "header"
    })

export default i18n;

此外，请确保您的翻译文件是有效的 JSON。

顺便说一句：如果您不想手动管理翻译文件或只是想寻找更好的管理解决方案，请查看 i18next-locize-backend。

每当我更改名称空间时都会出现 i18next::backendConnector 问题

React i18next::backendConnector issue whenever I change the namespace

reactjs

i18next

react-i18next