react 引入i18n.js失效

Question

项目需求多语，所以引入react-i18next这个组件，并根据官网案例进行编码，当一切准备就绪后

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

function App() {
  const { t, i18n } = useTranslation();//这个地方崩了，识别不了这个方法
  debugger
  // let a = i18n.language;
  return (
    <div className="App">
      <header className="App-header">
          <p>{t('ok')}</p>
        <button onClick={() => i18n.changeLanguage(i18n.language == 'en' ? 'de' : 'en')}>click me~</button>
      </header>
    </div>
  );
}

export default App;

在这个地方直接崩了。。。

下面是我代码：

i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
// import Backend from "i18next-xhr-backend";
// import LanguageDetector from "i18next-browser-languagedetector";
import zh from './zh';
import en from './en';

const resources = {
    en: {
        translation: {
            ...en
        }
    },
    zh: {
        translation: {
            ...zh
        }
    }
};

i18n
// .use(Backend) //—标识用户输入语言
// .use(LanguageDetector) //-将i18n实例传递给react-i18next模块
    .use(initReactI18next) //— i18next的实例。
    .init({
        resources,
        lng: 'zh', //-默认语言
        interpolation: {
            escapeValue: false
        }
    })
    .then(t => {
        console.log('18n ready');
    })
    .catch(error => {
        console.log(error)
    });
// const changeLanguage = lng => { //定义多语言的change 
//     i18n.changeLanguage(lng); //i18n会通过这个方法去改变它的语言
// };

export default i18n;

 zh.js

export default {
    ok: '确定'
};

en.js

export default {
    ok: 'OK'
};

 index.js引入

下面是输出页面：默认语种是中文，但输出只是t('ok')中的'ok'字符串，并不是确定。

调试发现，获取实例也不对。。。

在i18n.js文件中有输出'18n ready'，理论上程序运行后就会调取这个js文件并输出字符串''18n ready''，但并没有，感觉就没有 import './i18n' 这行代码失效了一样。。。请路过的大佬看看~

 

Answer 1

结束