react 使用react-i18next 如何不通过i18n.js配置翻译的json

使用 `react-i18next` 不需要通过 `i18n.js` 配置翻译的 json 文件。您可以通过以下步骤使用 `react-i18next`：

1. 安装 `react-i18next` 和 `i18next`：

npm install react-i18next i18next --save

2. 在您的应用程序中导入 `react-i18next`：

import React from 'react';
import ReactDOM from 'react-dom';
import { useTranslation, initReactI18next } from 'react-i18next';
import i18n from 'i18next';

i18n.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  resources: {
    en: {
      translation: {
        'welcome': 'Welcome to my app'
      }
    },
    fr: {
      translation: {
        'welcome': 'Bienvenue sur mon application'
      }
    }
  }
});

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

在以上示例中，我们使用 `useTranslation` 钩子来访问翻译函数 `t`，然后在组件中使用 `t('welcome')` 来获取翻译后的字符串。

您可以使用类似的方法添加更多的语言和翻译文本。例如，添加一个名为 `ja` 的新语言并在 `resources` 对象中添加对应的翻译文本：

resources: {
  en: {
    translation: {
      'welcome': 'Welcome to my app'
    }
  },
  fr: {
    translation: {
      'welcome': 'Bienvenue sur mon application'
    }
  },
  ja: {
    translation: {
      'welcome': '私のアプリへようこそ'
    }
  }
}

这样，您就可以通过 `useTranslation` 钩子轻松访问 `t` 函数并在应用程序中使用翻译文本。