Comment maintenir la locale dans les liens de navigation dans TanStack Start v1

Problème

Lorsque les informations de langue sont encodées dans le chemin URL, chaque lien de navigation doit préserver cette langue pour maintenir une expérience utilisateur cohérente. Si un utilisateur navigue sur la version française d'un site à /fr/products, cliquer sur un lien vers /about le fait basculer vers la langue par défaut, rompant ainsi le contexte de sa session. Coder en dur les paramètres de langue dans chaque lien est répétitif et sujet aux erreurs, surtout à mesure que l'application se développe et que davantage de liens sont ajoutés dans les composants.

Sans une approche systématique de la navigation tenant compte de la langue, les développeurs doivent choisir entre transmettre manuellement la langue à travers chaque composant Link ou accepter que les utilisateurs soient inopinément basculés vers la langue par défaut en pleine session. Ces deux options dégradent l'expérience utilisateur et augmentent la charge de maintenance.

Solution

Créer un composant wrapper autour du Link du framework qui lit automatiquement la langue actuelle depuis l'URL et l'injecte dans la prop params de chaque cible de navigation. En centralisant cette logique dans un seul composant réutilisable, tous les liens internes héritent d'un comportement adapté à la langue sans que les développeurs aient besoin de passer manuellement les paramètres de langue à chaque point d'appel.

Cette approche fonctionne en lisant la langue active à partir des paramètres de route en utilisant les hooks du routeur, puis en fusionnant cette langue dans les paramètres du lien de destination. Le wrapper préserve toutes les autres fonctionnalités du Link tout en assurant la continuité linguistique lors de la navigation.

Étapes

1. Créer un composant wrapper Link tenant compte de la langue

Construire un composant qui lit la langue actuelle et l'inclut automatiquement dans les paramètres de navigation.

import { Link, LinkProps, useParams } from "@tanstack/react-router";

type LocaleLinkProps = LinkProps & {
  to: string;
};

export function LocaleLink(props: LocaleLinkProps) {
  const params = useParams({ strict: false });
  const currentLocale = params.locale;

  const enhancedParams = {
    ...props.params,
    ...(currentLocale && { locale: currentLocale }),
  };

  return <Link {...props} params={enhancedParams} />;
}

Ce composant utilise useParams avec strict: false pour accéder aux paramètres de n'importe quelle route dans l'application, extrait la locale actuelle, et la fusionne dans la prop params transmise au Link sous-jacent. L'opérateur spread garantit que tous les paramètres explicitement fournis ont la priorité.

Remplacez les composants Link standard par LocaleLink dans toute votre application.

import { createFileRoute } from "@tanstack/react-router";
import { LocaleLink } from "../components/LocaleLink";

export const Route = createFileRoute("/{-$locale}/products")({
  component: ProductsPage,
});

function ProductsPage() {
  return (
    <div>
      <h1>Products</h1>
      <nav>
        <LocaleLink to="/{-$locale}/about">About</LocaleLink>
        <LocaleLink to="/{-$locale}/contact">Contact</LocaleLink>
        <LocaleLink to="/{-$locale}/products/$id" params={{ id: "123" }}>
          Product 123
        </LocaleLink>
      </nav>
    </div>
  );
}

Lorsqu'un utilisateur visite /fr/products, tous les composants LocaleLink se résolvent automatiquement en /fr/about, /fr/contact, et /fr/products/123. Le paramètre de locale est préservé sans intervention manuelle à chaque lien.

3. Gérez explicitement le changement de locale lorsque nécessaire

Pour les composants de sélection de langue, contournez l'injection automatique de locale en utilisant directement le composant Link standard.

import { Link, useParams } from "@tanstack/react-router";

export function LanguageSwitcher() {
  const params = useParams({ strict: false });
  const currentPath = window.location.pathname.replace(/^\/(en|fr|es)/, "");

  return (
    <div>
      <Link to={`/{-$locale}${currentPath}`} params={{ locale: "en" }}>
        English
      </Link>
      <Link to={`/{-$locale}${currentPath}`} params={{ locale: "fr" }}>
        Français
      </Link>
      <Link to={`/{-$locale}${currentPath}`} params={{ locale: "es" }}>
        Español
      </Link>
    </div>
  );
}