Comment implémenter un 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 des liens vers des versions linguistiques spécifiques, et les moteurs de recherche peinent à 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, comme /en/about ou /fr/about. Cela rend chaque chemin unique à une langue spécifique, éliminant l'ambiguïté tant pour les utilisateurs que pour 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 quelle langue de contenu afficher. Cette approche garantit que chaque URL identifie sans ambiguïté à la fois la page et sa langue.

Étapes

1. Définir des 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é à partir de 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 de l'URL. La mise en page utilise cette locale pour construire des 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 de 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 permettre 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.