La detección de idioma funciona bien. Todas las cadenas se traducen al idioma del usuario, pero las imágenes y los marcadores de posición de entrada se muestran en el idioma predeterminado. Cuando cambio los idiomas manualmente, la traducción de imágenes y marcadores de posición funciona como se esperaba.

Ahí está mi i18n.js

 import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import LanguageDetector from 'i18next-browser-languagedetector'; import en from './locales/en.json'; import ru from './locales/ru.json'; const resources = { en, ru }; const DETECTION_OPTIONS = { order: ['localStorage','navigator'], cache: ['localStorage'], debug: true, }; i18n .use(LanguageDetector) .use(initReactI18next) // passes i18n down to react-i18next .init({ resources, detection: DETECTION_OPTIONS, fallbackLng: 'en', supportedLngs: ['en', 'ru'], interpolation: { escapeValue: false // react already safes from xss }, react: { bindI18n: 'languageChanged loaded', wait: true, useSuspense: false } }); export default i18n;

Hay una versión corta de mi página:

 import React, { useRef, useEffect, useState } from 'react' import i18n from "i18next"; import { useTranslation, initReactI18next } from "react-i18next"; export default function Feedback(){ const { t, ready } = useTranslation('', { useSuspense: false }); if (ready === false){ return <div></div> } return <div className="feedback-page"> ... <img className="feedback-logo" src={t('feedback.whiteLogo')}/> <input type="email" name="email" className="feedback-input" onChange={e => setEmail(e.target.value)} placeholder={`${t('feedback.email')}`} value={email}/> ... </div> }

También intenté usar Suspense, pero recibí el error "ReactDOMServer aún no es compatible con Suspense".

¿Hay alguna manera de hacer que funcione?