Attempted import error: 'useTranslation' is not exported from 'react-i18next'

Question

我需要帮助我收到这个错误

./src/components/Header/Header.js
Attempted import error: 'UseTranslation' is not exported from 'react-i18next'.

这是一个新项目，我在其中逐步安装了 https://react.i18next.com 但是我在导入 UseTranslation

时遇到了问题

在 header.js 我得到了这个

import { useTranslation } from 'react-i18next';
//style
import "./Header.scss";


class Header extends Component {
  
  render() {


    const { t, i18n } = useTranslation();

    return (
      
      <div className="container-header">
        <div className="container-header__main">
          <div className="container-header__main-overlay">
            <div className="container-header__main-overlay__text">
              <div className="container-header__main-overlay__text__title">
         
                {t('hello')}
              </div>
              <div className="container-header__main-overlay__text__subtitle">
                  {t('hello2')}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Header;

这是我的i18n.js我觉得还可以

import i18n from "i18next";
import { reactI18nextModule } from "react-i18next";

import EN from './assets/translation/en.json';
import CZ from './assets/translation/cz.json';

const resources = {
  en: {
    translation: EN
  },
  cz:{
      translation: CZ
  }
};

i18n
  .use(reactI18nextModule) 
  .init({
    resources,
    lng: "en",
    fallbackLng: "en",
    useSuspense: false,

  });

export default i18n;

Answer 1

它用于 hook 的 useTranslation 但是你使用类组件你应该使用 Hoc

import { withTranslation } from 'react-i18next';
   const  {t,i18n} =this.props

  {t('hello2')}
export default withTranslation()(Header);

并在您的 index.js 中添加 Suspense

import React, { Component, Suspense } from 'react';

  <Suspense fallback={<div>Loading....</div>}>
   
   <App />//your Component

  </Suspense>

Attempted import error: 'useTranslation' is not exported from 'react-i18next'

Attempted import error: 'useTranslation' is not exported from 'react-i18next'

reactjs

react-i18next