3 分钟内使用 React 构建多语言网站

如果您正在寻找构建多语言网站的方法，那么这里就是您的理想之选。

这个解决方案的核心是React-I18next。它是一个用于翻译语言的 React 库。你可以使用以下命令行安装该库：

npm install i18next react-i18next@latest

首先，我们需要配置库：

1. 创建一个初始化 i8next 文件。我将其命名为`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"
        }
      },
      vn: {
        translation: {
         welcome: "Chào mừng đến với bình nguyên vô tận"
        }
      },
    }
  });

export default i18n;

接下来，将文件导入index.js

//pla pla
import './i18n'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

让我们注意一下resource可以推送更多对应语言的属性。在实际项目中，此资源可以来自数据库（我们将在另一篇文章中讨论），但为了简化演示，我想将英语翻译成越南语并直接使用对象。默认语言是英语。

2. 玩图书馆。

这个想法是，用户点击按钮来翻译网站上的语言。让我们打开App.js

为了显示和切换两种语言，该库提供了useTranslation()。它是 react-18next 内置的，它公开了一些如下功能：

import { useTranslation } from 'react-i18next';

export default function App() {

  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
    </div>
  );
}
export default App;

我们使用t已配置的资源对象中的键对象来获取内容。默认语言是英语，因此显示Welcome to React。

import { useTranslation } from "react-i18next";

const lngs = [
  { code: "en", native: "English" },
  { code: "vn", native: "Vietnamese" },
];

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>
  );
}

接下来，i8next 实例包含changeLanguage一个用于根据国家代码更改语言的函数。它接受一个国家代码（en 和 vn）作为参数。

3. 结果

最后，希望这篇文章能对你有所帮助。如果你想让我把它和数据库一起使用，请在下方留言。我强烈建议你去看看他们的文档，学习如何扩展一个大型项目。

文章来源：https://dev.to/quocbahuynh/build-a-multi-language-website-using-react-in-3-minutes-4206

3 分钟内使用 React 构建多语言网站

3 分钟内使用 React 构建多语言网站

1. 创建一个初始化 i8next 文件。我将其命名为i18n.js：

2. 玩图书馆。

3. 结果

1. 创建一个初始化 i8next 文件。我将其命名为`i18n.js`：