React 实现多语言（使用i18n）

1.新建i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en_translate from './locales/en.json';
import zh_translation from './locales/zh.json';

i18n.use(initReactI18next).init({
    // fallbackLng: 'zh',
    // lng: 'zh',
    fallbackLng: localStorage.getItem('lang') ? localStorage.getItem('lang') : 'zh_CN',
    resources: {
        en: {
            translation: en_translate
        },
        zh_CN: {
            translation: zh_translation
        }
    },
    debug: false,
    interpolation: {
        escapeValue: false // not needed for react as it escapes by default
    }
});
export default i18n;

 1.index.js 全局使用

import './i18n';
import { useTranslation } from 'react-i18next';





const { t } = useTranslation();
global.t = t;

2.页面

import { Select } from 'antd';
import { useTranslation } from 'react-i18next';
import './index.less';

function topMenu(_props) {
    
    const { t, i18n } = useTranslation();
   

    const changeLanguages = e => {
        i18n.changeLanguage(e);
        localStorage.setItem('lang', e);
       
    };

    return (
        <div className="language-change" id="language-change">
            <div>
                <Select
                    className="language"
                    defaultValue={
                        localStorage.getItem('lang') ? localStorage.getItem('lang') : 'zh_CN'
                    }
                    onChange={changeLanguages}
                    getPopupContainer={() => document.getElementById('language-change')}
                >
                    <Select.Option value="zh_CN">{t('chinese')}</Select.Option>
                    <Select.Option value="en">{t('english')}</Select.Option>
                    {/* <Select.Option value="ja">{t('ja')}</Select.Option>
                    <Select.Option value="ko">{t('ko')}</Select.Option>
                    <Select.Option value="ru">{t('ru')}</Select.Option> */}
                </Select>
            </div>
        </div>
    );
}
export default topMenu;