React i18next 缺少 React 应用程序的关键问题

Question

I'm trying to implement a multi language site on my website but all I'm getting is that I'm missing a key and I really don't know why.

Here is my i18n config file

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;

and my index.jsx looks like this

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'),
);

And I'm trying to use the translation like this

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);

I've tried without the withTranslation and still nothing.

i18next::translator: missingKey en translations key key

this is one of the messages I'm getting and the other is

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

but this last one is just a warning from the console

thank you in advance.

Answer 1

Set the correct namespace:

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