多语言站点React前端框架i18next

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

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

图片

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

图片

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

图片

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

npm install i18next react-i18next@latest
  • 1.

然后,我们创建一个 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;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.

在这里面,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 notallow={() => handleTrans(code)}>{native}</button>;
      })}

    </div>
  );
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.

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

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

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

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

npm install i18next-browser-languagedetector --save
  • 1.

使用方式如下:

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;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.

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

图片

总之,i18next 是非常不错的多语言站点插件,更多的使用方法和介绍你可以参考官网。

责任编辑:武晓燕 来源: 程序那些事儿
相关推荐

2021-07-24 11:41:42

前端开发技术

2014-04-16 14:50:20

Spark

2009-08-25 10:44:50

C#实现多语言

2012-04-19 11:40:21

Titanium

2014-07-09 09:20:06

WPFWPF应用

2011-08-05 17:54:33

Cocoa Touch 多语言

2024-05-09 08:14:09

系统设计语言多语言

2022-08-09 07:22:15

语言数据库程序

2023-10-18 15:21:23

2023-08-04 10:18:15

2021-09-07 10:17:35

iOS多语言适配设计

2021-06-29 21:48:32

开源语言架构

2009-08-03 17:33:01

ASP.NET多语言支

2009-07-17 10:02:29

WPF程序多语言支持

2010-11-19 09:25:06

to_dataOracle

2020-04-14 09:50:02

2019-08-22 10:20:41

Ubuntu设置语言

2019-12-05 16:00:15

Vim插件编程文本编辑器

2009-08-31 17:13:09

2009-08-21 18:46:30

下载Server 20
点赞
收藏

51CTO技术栈公众号