在 react 中，其實(shí)已經(jīng)有人封裝了多語言的擴(kuò)展庫，我們只需要安裝它就可以在我們的 react 項(xiàng)目中實(shí)現(xiàn)網(wǎng)站的多語言切換。
現(xiàn)在的網(wǎng)站很多時(shí)候都需要面對(duì)世界過個(gè)地區(qū)的人們?cè)L問，如果針對(duì)每個(gè)地區(qū)的人都單獨(dú)構(gòu)建一個(gè)網(wǎng)站的話，這樣會(huì)非常費(fèi)時(shí)費(fèi)力，因此最好的解決辦法就是根據(jù)用戶的訪問來對(duì)網(wǎng)站的內(nèi)容進(jìn)行翻譯，這種翻譯一般是通過從數(shù)據(jù)庫獲取對(duì)應(yīng)的語言內(nèi)容來進(jìn)行頁面內(nèi)容的替換。
在 react 中，其實(shí)已經(jīng)有人封裝了多語言的擴(kuò)展庫，我們只需要安裝它就可以在我們的 react 項(xiàng)目中實(shí)現(xiàn)網(wǎng)站的多語言切換。
下面我們簡單介紹下如何使用它。
首先，我們需要通過包管理工具比如 npm 等來安裝它。
npm install i18next react-i18next@latest
然后，我們創(chuàng)建一個(gè) i18n.js 配置文件，里面對(duì)多語言進(jìn)行相關(guān)的配置。
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 屬性里面配置的就是對(duì)應(yīng)的各個(gè)語言的翻譯，這里面的數(shù)據(jù)，一般我們都是從數(shù)據(jù)庫中獲取，這里為了演示，我們直接寫在了配置文件中。
接下來，我們介紹下如何在項(xiàng)目中使用它。
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>
);
}在這里，我們放置了兩個(gè)按鈕，一個(gè)是中文，一個(gè)是英文，點(diǎn)擊中文，顯示中文內(nèi)容，點(diǎn)擊英文，顯示英文內(nèi)容，這里我們主要就是通過調(diào)用i18n.changeLanguage這個(gè)函數(shù)來實(shí)現(xiàn)對(duì)應(yīng)語言的轉(zhuǎn)換，我們需要翻譯的短語使t函數(shù)進(jìn)行包裹。
對(duì)于用戶語言的識(shí)別，我們主要可以通過下面的幾種方式進(jìn)行識(shí)別。
- cookie
- localStorage
- navigator
- querystring (append ?lng=LANGUAGE to URL)
- htmlTag
- path
- subdomain
這些方式 i18next 都是支持的，不過使用的時(shí)候需要先安裝。
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組件，可以讓你方便的集成到項(xiàng)目中。
總之，i18next 是非常不錯(cuò)的多語言站點(diǎn)插件，更多的使用方法和介紹你可以參考官網(wǎng)。
