React I18Next缺少React App的关键问题

Question

我正在尝试在我的网站上实现多语言网站，但是我得到的只是我缺少一个钥匙，我真的不知道为什么。

这是我的i18n配置文件

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

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    lng: 'en',
    resources: {
      en: {
        translation: { key: 'value' },
      },
      es: {
        translation: { key: 'value' },
      },
    },
    fallbackLng: 'en',
    debug: true,
    ns: ['translations'],
    defaultNS: 'translations',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
      formatSeparator: ',',
    },
    react: {
      wait: true,
      useSuspense: false,
    },
  });

export default i18n;

和我的index.jsx看起来像这样

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { I18nextProvider } from 'react-i18next';
import Home from './pages/Home';
import Gallery from './pages/Gallery';
import NotFound from './pages/404';
import UnderConstruction from './pages/UnderConstruction';
import i18n from './i18n';

ReactDOM.render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <Suspense fallback={null}>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/gallery" element={<Gallery />} />
            <Route path="/about-us" element={<UnderConstruction />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </BrowserRouter>
      </Suspense>
    </I18nextProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

，我试图使用我尝试过的翻译，

import '../assets/scss/header.scss';
import { useEffect, useState } from 'react';
import { useTranslation, withTranslation } from 'react-i18next';
import { ReactComponent as MenuIcon } from '../assets/images/menu.svg';
import Logo from '../assets/images/dmeh-logo.jpg';
import LangSelector from './LangSelector';

function Navbar({ t }) {
  const [click, setClick] = useState(false);
  const handleClick = () => setClick(!click);
  // const { t } = useTranslation();
  // console.log(t);
  const [show, setShow] = useState(false);
  const controlNavbar = () => {
    if (window.scrollY <= 100) {
      setShow(false);
    } else {
      setShow(true);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', controlNavbar);
    return () => {
      window.removeEventListener('scroll', controlNavbar);
    };
  }, []);

  return (
    <nav className={`navbar ${show && 'nav__shrink'}`}>
      <div className="logo-nav">
        <div className="logo-container">
          <div className="logo-navbar">
            <a href="/">
              <img src={Logo} alt="" />
            </a>
          </div>
        </div>
      </div>

      <div className={click ? 'menu active' : 'menu'}>
        <LangSelector click={click} />
        <div className="categories-options">
          <ul className={click ? 'nav-options active' : 'nav-options'}>
            <li className="nav-option">
              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
              <a href="/#services">
                {' '}
                {t('key')}
                {' '}
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div className="mobile-menu">
        <button type="button" onClick={handleClick}>
          <MenuIcon className="flag-icon" />
        </button>
      </div>
    </nav>
  );
}

export default withTranslation()(Navbar);

而没有withtranslation，但仍然没有。

i18next::translator: missingKey en translations key key

这是我收到的信息之一，另一个是

It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.

最后一条信息，这只是主机

提前的警告。

Answer 1

设置正确的名称空间：

ns: ['translation'],
defaultNS: 'translation',