How to add a locale prefix to routes in React.js with i18next?

When implementing internationalization and localization in your React application, i18next is a widely adopted and robust library. To incorporate language codes into URL paths, you can integrate react-router with i18next. Below is a step-by-step guide:

Step 1: Install necessary libraries

First, verify that your project includes react-router-dom and related i18next packages.

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

Step 2: Configure i18next

Set up i18next in your project, typically within a dedicated configuration file like 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) // Load translation files
  .use(LanguageDetector) // Automatically detect user's language
  .use(initReactI18next) // Pass the i18n instance to react-i18next
  .init({
    fallbackLng: 'en', // Use English as the fallback language
    debug: true,
    detection: {
      order: ['path', 'cookie', 'header'],
      lookupFromPathIndex: 0
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json', // Path for language and namespace
    },
  });

export default i18n;

Step 3: Set up routes

Configure react-router to capture language codes from URLs and render corresponding components.

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;

Step 4: Implement language switching

Provide users with a mechanism to change languages within your application.

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')}>Chinese</button>
    </div>
  );
}

export default LanguageSwitcher;

Summary

By following these steps, you can implement internationalization with i18next and react-router in your React application, enabling seamless language switching. This approach not only enhances user experience but also supports global application deployment. With this method, each language version in the URL is directly accessible, which improves SEO optimization.