react-i18next: attempted import error: 'withNamespaces' is not exported from 'react-i18next'

Question

我目前正在尝试使用 react-i18next 翻译我的应用程序，并使用多个文件进行翻译，因为我希望它是清楚的。这就是为什么我想使用 withNamespaces 而不是 withTranslation，但是当我尝试从 'react-i18next' 导入 withNamespaces 时，我收到以下错误消息：

尝试导入错误：'withNamespaces' 未从 'react-i18next' 导出。

这是我的代码：

import React, { Component } from 'react'
import {Link} from 'react-router-dom'
import {  withNamespaces } from 'react-i18next'


class Navbar extends Component {
    render(){
        return (
            <>
                <ul>
                    {this.props.items.map(item => (
                        <li key={item.key}>
                            <Link to={item.route} className='jb-navbar_menu-item_link' >
                                { this.props.t('header:'+item.name)}
                            </Link>
                        </li>
                    ))}
                </ul>
            </>
        )
    }
}

export default  withNamespaces('header')(Navbar)

我做错了什么？我是以错误的方式导入的吗？还是我的配置有问题？

这是我的 i18n.js:

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

import translationEN from './locales/en/translation.json';
import translationDE from './locales/de/translation.json';
import headerDE from './locales/de/header.json';
import headerEN from './locales/en/header.json';

// the translations
const resources = {
  de: {
    translation: translationDE,
    header: headerDE
  },
  en: {
    translation: translationEN,
    header: headerEN
  }
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    ns:['translation', 'header'],
    defaultNS: 'translation',

    resources,
    lng: "de",
    fallbackLng: "de",

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  }); // key in common namespace);

i18n.loadNamespaces('header')

export default i18n;

Answer 1

很可能你的 react-i18next 版本不匹配

withNamespaces 已在 V10 中弃用，您可以使用 withTranslation 相反。
react-i18next 文档中有一个很好的 table 显示了哪个版本的哪些组件：
https://react.i18next.com/latest/migrating-v9-to-v10

react-i18next: attempted import error: 'withNamespaces' is not exported from 'react-i18next'

react-i18next: attempted import error: 'withNamespaces' is not exported from 'react-i18next'

reactjs

react-i18next