如何使用React js和 i18next 将使用区域设置添加到路径中？

当您想在React应用程序中实现国际化和本地化时，i18next 是一个非常流行和强大的库。为了将区域设置添加到路径中，您可以使用 react-router 与 i18next 结合。以下是一步一步的方法：

步骤 1: 安装必要的库

首先，确保您的项目中安装了 react-router-dom 和 i18next 相关库。

bash
npm install react-router-dom i18next react-i18next i18next-http-backend i18next-browser-languagedetector

步骤 2: 配置 i18next

在您的项目中配置 i18next。这通常是在一个单独的配置文件中完成的，例如 i18n.js。

javascript
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(HttpBackend) // 加载翻译文件
  .use(LanguageDetector) // 自动检测用户语言
  .use(initReactI18next) // pass the i18n instance to react-i18next.
  .init({
    fallbackLng: 'en', // 使用英语作为备选语言
    debug: true,
    detection: {
      order: ['path', 'cookie', 'header'],
      lookupFromPathIndex: 0
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json', // 路径为语言和命名空间
    },
  });

export default i18n;

步骤 3: 设置路由

配置 react-router，使其可以在URL中捕捉到语言代码，并据此渲染对应的组件。

javascript
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  const { i18n } = useTranslation();

  return (
    <Router>
      <Switch>
        <Route path="/:lng" children={<Header />} />
        <Route path="/:lng/home" render={() => <HomePage />} />
        <Route path="/:lng/about" render={() => <AboutPage />} />
        <Redirect from="/" to={`/${i18n.language}`} />
      </Switch>
    </Router>
  );
}

export default App;

步骤 4: 修改语言

在您的应用中，提供一种方式让用户能够切换语言。

javascript
import { useTranslation } from 'react-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
}

export default LanguageSwitcher;

总结

通过以上步骤，您可以在React应用程序中使用i18next和react-router实现带语言切换的国际化。这不仅增强了用户体验，而且也有助于应用的全球化。通过这种方式，URL中的每个不同语言版本都能直接访问，也有利于SEO优化。