Comment implémenter le routage basé sur la locale dans React Router v7

Problème

Lors de la création d'une application multilingue, une décision fondamentale façonne tout le reste : comment l'application saura-t-elle quelle langue afficher ? Sans mécanisme explicite, l'URL /about devient ambiguë — elle pourrait représenter du contenu dans n'importe quelle langue. Les utilisateurs ne peuvent pas partager de liens vers des versions linguistiques spécifiques, et les moteurs de recherche ont du mal à comprendre quelle version appartient à quel public. Cette ambiguïté crée des problèmes tant pour l'expérience utilisateur que pour la découvrabilité.

Solution

Placez un identifiant de langue directement dans le chemin de l'URL, tel que /en/about ou /fr/about. Cela rend chaque chemin unique à une langue spécifique, éliminant l'ambiguïté pour les utilisateurs et les moteurs de recherche. En définissant des routes avec un paramètre de locale comme premier segment, l'application peut extraire la locale de l'URL et l'utiliser pour déterminer quel contenu linguistique afficher. Cette approche garantit que chaque URL identifie sans ambiguïté à la fois la page et sa langue.

Étapes

1. Définir les routes avec un paramètre de locale

Configurez vos routes dans app/routes.ts pour inclure un paramètre de locale comme premier segment de chaque chemin.

import { type RouteConfig, route, index } from "@react-router/dev/routes";

export default [
  route(":locale", "./localized-layout.tsx", [
    index("./home.tsx"),
    route("about", "./about.tsx"),
    route("contact", "./contact.tsx"),
  ]),
] satisfies RouteConfig;

Le préfixe deux-points fait de locale un segment dynamique qui sera analysé depuis l'URL et fourni comme paramètre aux composants de route. Cette configuration crée des routes comme /en, /en/about, /fr/contact, où le premier segment est toujours la locale.

2. Créer un composant de mise en page pour extraire la locale

Les routes enfants sont rendues via le composant Outlet dans la route parente. Créez une mise en page qui extrait le paramètre de locale et rend les routes imbriquées.

import { Outlet, useParams } from "react-router";

export default function LocalizedLayout() {
  const { locale } = useParams();

  return (
    <div>
      <nav>
        <a href={`/${locale}`}>Home</a>
        <a href={`/${locale}/about`}>About</a>
        <a href={`/${locale}/contact`}>Contact</a>
      </nav>
      <Outlet />
    </div>
  );
}

Le hook useParams récupère la valeur du segment dynamique depuis l'URL. La mise en page utilise cette locale pour construire les liens de navigation et transmet le contrôle du rendu aux routes enfants via Outlet.

3. Accéder à la locale dans les composants de page

Utilisez le hook useParams dans n'importe quel composant de route pour accéder au paramètre de locale.

import { useParams } from "react-router";

export default function About() {
  const { locale } = useParams();

  return (
    <div>
      <h1>About Us</h1>
      <p>Current locale: {locale}</p>
    </div>
  );
}

Chaque composant rendu dans la mise en page localisée peut extraire la locale depuis l'URL. Cette valeur peut ensuite être utilisée pour charger les traductions appropriées, formater les dates et les nombres, ou prendre toute autre décision spécifique à la locale.

Remplacez les balises d'ancrage par des composants Link pour activer la navigation avec le routage côté client.

import { Outlet, useParams, Link } from "react-router";

export default function LocalizedLayout() {
  const { locale } = useParams();

  return (
    <div>
      <nav>
        <Link to={`/${locale}`}>Home</Link>
        <Link to={`/${locale}/about`}>About</Link>
        <Link to={`/${locale}/contact`}>Contact</Link>
      </nav>
      <Outlet />
    </div>
  );
}

Le composant Link gère le routage côté client et empêche le rechargement de la page web, permettant une navigation fluide entre les pages. Chaque lien inclut le paramètre de locale pour maintenir le contexte linguistique lors de la navigation.