How to dynamically add language to URL in React using i18next?

Using i18next to dynamically add language parameters to URLs in React involves several key steps. First, set up i18next properly, then integrate it with React Router to dynamically handle language parameters in URLs. I'll walk you through the process step by step:

Step 1: Install the necessary libraries

Install the required libraries, such as react-i18next for React integration, i18next-browser-languagedetector for automatically detecting the user's language preferences, and i18next-http-backend for fetching translations. Use npm or yarn:

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

Step 2: Configure i18next

Configure i18next in your React project. Create an initialization file (e.g., i18n.js) with the following setup:

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

i18n
  .use(HttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    detection: {
      order: ['querystring', 'cookie', 'localStorage', 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
      caches: ['localStorage', 'cookie'],
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

Step 3: Integrate React Router and language switching

Integrate React Router into your application to dynamically switch languages based on URL changes. Modify your route configuration to allow URLs to include language codes:

javascript
import React from 'react';
import { BrowserRouter as Router, Route, Switch } 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?" exact component={HomePage} />
        <Route path="/":lng?"/about" component={AboutPage} />
      </Switch>
    </Router>
  );
}

export default App;

Here, :lng? is a parameter representing the language (e.g., en, de, fr).

Step 4: Dynamically listen for and update language changes

Listen for route changes in your React components to retrieve the language parameter from the URL and update i18next settings accordingly:

javascript
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

function HomePage() {
  const { lng } = useParams();
  const { i18n } = useTranslation();

  useEffect(() => {
    if (lng) {
      i18n.changeLanguage(lng);
    }
  }, [lng, i18n]);

  return (
    <div>
      <h1>{i18n.t('welcome_message')}</h1>
    </div>
  );
}

export default HomePage;

Summary

The above outlines the basic steps for using i18next in React to dynamically add language parameters to URLs. Ensure your route configuration is correct and listen for route changes in components to dynamically update the language. This enables automatic language detection based on user location and manual switching that reflects in the URL, improving SEO and user experience.