用i18next实现翻译问题

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

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: require('./locales/en.json')
      },
      fr: {
        translation: require('./locales/fr.json')
      }
    },
    lng: 'en', // 默认语言
    fallbackLng: 'en', // 回退语言
    interpolation: {
      escapeValue: false // React 已经处理了 XSS 防护
    }
  });

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => changeLanguage('fr')}>Français</button>
      <button onClick={() => changeLanguage('en')}>English</button>
    </div>
  );
}

{
  "key_with_variable": "Hello {{name}}",
  "plural_example": {
    "zero": "No items",
    "one": "One item",
    "other": "{{count}} items"
  }
}

const { t } = useTranslation();

console.log(t('key_with_variable', { name: 'John' })); // 输出: Hello John
console.log(t('plural_example', { count: 5 })); // 输出: 5 items