多语言站点react前端框架i18next

程序那些事儿

发布于 2023-03-07 11:12:05

3.1K0

现在的网站很多时候都需要面对世界过个地区的人们访问，如果针对每个地区的人都单独构建一个网站的话，这样会非常费时费力，因此最好的解决办法就是根据用户的访问来对网站的内容进行翻译，这种翻译一般是通过从数据库获取对应的语言内容来进行页面内容的替换。

在 react 中，其实已经有人封装了多语言的扩展库，我们只需要安装它就可以在我们的 react 项目中实现网站的多语言切换。

下面我们简单介绍下如何使用它。

首先，我们需要通过包管理工具比如 npm 等来安装它。

npm install i18next react-i18next@latest

然后，我们创建一个 i18n.js 配置文件，里面对多语言进行相关的配置。

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

i18n
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    // language resources
    resources: {
      en: {
        translation: {
         welcome: "Welcome to React"
        }
      },
      zh: {
        translation: {
         welcome: "欢迎使用 React"
        }
      },
    }
  });

export default i18n;

在这里面，resources 属性里面配置的就是对应的各个语言的翻译，这里面的数据，一般我们都是从数据库中获取，这里为了演示，我们直接写在了配置文件中。

接下来，我们介绍下如何在项目中使用它。

import { useTranslation } from "react-i18next";

const lngs = [
  { code: "en", native: "English" },
  { code: "zh", native: "Chinese" },
];

export default function App() {
  const { t, i18n } = useTranslation();

  const handleTrans = (code) => {
    i18n.changeLanguage(code);
  };

  return (
    <div style={{padding: '50px'}}>
      <h1>{t("welcome")}</h1>

      {lngs.map((lng, i) => {
        const { code, native } = lng;
        return <button onClick={() => handleTrans(code)}>{native}</button>;
      })}

    </div>
  );
}

在这里，我们放置了两个按钮，一个是中文，一个是英文，点击中文，显示中文内容，点击英文，显示英文内容，这里我们主要就是通过调用i18n.changeLanguage这个函数来实现对应语言的转换，我们需要翻译的短语使t函数进行包裹。

对于用户语言的识别，我们主要可以通过下面的几种方式进行识别。

cookie
localStorage
navigator
querystring (append ?lng=LANGUAGE to URL)
htmlTag
path
subdomain

这些方式 i18next 都是支持的，不过使用的时候需要先安装。

npm install i18next-browser-languagedetector --save

使用方式如下：


import i18n from "i18next";
import detector from "i18next-browser-languagedetector";
import { reactI18nextModule } from "react-i18next";

import translationEN from '../public/locales/en/translation.json';
import translationDE from '../public/locales/de/translation.json';

// the translations
const resources = {
  en: {
    translation: translationEN
  },
  de: {
    translation: translationDE
  }
};

i18n
  .use(detector)
  .use(reactI18nextModule) // passes i18n down to react-i18next
  .init({
    resources,
    fallbackLng: "en", // use en if detected lng is not available

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

export default i18n;

i18next 此外还支持热更新，还支持 SSR，它还提供了Trans组件，可以让你方便的集成到项目中。