現在的網站很多時候都需要面對世界過個地區的人們訪問，如果針對每個地區的人都單獨構建一個網站的話，這樣會非常費時費力，因此最好的解決辦法就是根據用戶的訪問來對網站的內容進行翻譯，這種翻譯一般是通過從數據庫獲取對應的語言內容來進行頁面內容的替換。
在 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 notallow={() => 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組件，可以讓你方便的集成到項目中。
總之，i18next 是非常不錯的多語言站點插件，更多的使用方法和介紹你可以參考官網。
