前言

i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。

在React中，可以使用i18next来支持i18n，本篇文章为大家来讲解如何在React-Typescript项目中如何使用i18next。

老规矩，先来share一下本篇文档的repo:

gitlab.com/yafeya/reac…

1. 安装依赖

这篇文档还的Demo还是基于本系列之前的文档构建的。想要在现有项目中支持i18next首先需要安装依赖，执行以下代码，安装依赖。

npm install i18next i18next-browser-languagedetector react-i18next

2. 使用资源

首先添加i18n.tsx, zh.json, 与en.json。其中zh.json中存放所有中文资源，en.json中存放所有英文资源。

i18n.tsx用来使用这两个字源文件，并进行一些基础的设置。

// i18n.tsx
import i18n from "i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import enResources from "./en.json";
import zhResources from "./zh.json";
import { initReactI18next } from 'react-i18next';

const DETECTION_OPTIONS = {
  order: ['path', 'querystring']
}

i18n.use(LanguageDetector) //获取当前浏览器语言
.use(initReactI18next) 
.init({
  // 使用option
  detection: DETECTION_OPTIONS,
  //资源文件
  resources: {
    en: {
      translation: enResources,
    },
    zh: {
      translation: zhResources,
    },
  },
  // 如果找不到语言设置，将会使用fallbackLng
  fallbackLng: "zh",
  debug: false,
  interpolation: {
    escapeValue: false,
  },
})
 
export default i18n;

3. App中引入i18n

// App.tsx
// ...
import '../i18n/i18n';

export class App extends Component {
    //...
}

4. 使用translation

新建translation component用来引入可翻译的资源。

一般可使用三种方式进行翻译：

• t('testing')
• <Trans>testing</Trans>
• <Translation>{t => <div>{t('thirdWay')}</div>}</Translation>

// translation.tsx

let { t, i18n } = useTranslation();
// ...
<div className='translationWrapper'>
    <div className='translationGroup'>
        <label>{t('firstWay')}</label>
        <label>{t('testing')}</label>
    </div>
    <div className='translationGroup'>
        <label>
            <Trans>secondWay</Trans>
        </label>
        <label>
            <Trans>testing</Trans>
        </label>
    </div>
    <div className='translationGroup'>
        <label>
            <Translation>{t => <div>{t('thirdWay')}</div>}</Translation>
        </label>
        <label>
            <Translation>{t => <div>{t('testing')}</div>}</Translation>
        </label>
    </div>
</div>

5. 切换语言

可以通过调用i18n.changeLanguage(language)来修改当前语言。

function onclick() {
    let targetLanauge = i18n.language === 'en' ? 'zh' : 'en';
    i18n.changeLanguage(targetLanauge);
}

// ...
<div className='translationGroup'>
    <button className='btn btn-primary' onClick={() => onclick()}>{t('switchLanguage')}</button>
</div>

6. SEO Friendly

使用i18n的时候，还需要注意另一点，就是确保你的app对于SEO是Friendly的，也就是说，你需要给你的客户一个能访问到正确语言的URL。

比如对于中文用户，你给的URL应该是 http://some-domain/zh, 而对于英文用户，你给的URL应该是http://some-domain/en。

i18next对于SEO-Friendly的支持做的还不错。通过设置init-options，可以设置语言监测的顺序。

// i18n.tsx

// path: 根据URL来检测语言信息
// queryString: 根据queryString来检测语言信息，?lng=language
// 还支持很多其他的方式，不过哪些方式不是SEO-Friendly的
const DETECTION_OPTIONS = {
  order: ['path', 'querystring']
}

i18n.use(LanguageDetector) //获取当前浏览器语言
.use(initReactI18next) 
.init({
  detection: DETECTION_OPTIONS,
  // ...
  })

当设置完语言信息后，可以在DevTools -> Application -> localStorage中看到设置的结果。