So behalten Sie die Sprache in Navigationslinks in TanStack Start v1 bei

Problem

Wenn Sprachinformationen im URL-Pfad kodiert sind, muss jeder Navigationslink diese Sprache beibehalten, um eine konsistente Benutzererfahrung zu gewährleisten. Wenn ein Benutzer die französische Version einer Website unter /fr/products aufruft und auf einen Link zu /about klickt, wird er in die Standardsprache versetzt, wodurch sein Sitzungskontext unterbrochen wird. Das Hartcodieren von Sprachparametern in jeden Link ist repetitiv und fehleranfällig, insbesondere wenn die Anwendung wächst und mehr Links in den Komponenten hinzugefügt werden.

Ohne einen systematischen Ansatz für sprachbewusste Navigation stehen Entwickler vor der Wahl, entweder die Sprache manuell durch jede Link-Komponente zu fädeln oder zu akzeptieren, dass Benutzer unerwartet mitten in der Sitzung zur Standardsprache gewechselt werden. Beide Ergebnisse beeinträchtigen die Benutzererfahrung und erhöhen den Wartungsaufwand.

Lösung

Erstellen Sie eine Wrapper-Komponente um die Link-Komponente des Frameworks, die automatisch die aktuelle Sprache aus der URL liest und sie in die params-Eigenschaft jedes Navigationsziels einfügt. Durch die Zentralisierung dieser Logik in einer einzigen wiederverwendbaren Komponente erben alle internen Links sprachbewusstes Verhalten, ohne dass Entwickler an jeder Aufrufstelle manuell Sprachparameter übergeben müssen.

Dieser Ansatz funktioniert, indem die aktive Sprache aus den Routenparametern mithilfe der Router-Hooks gelesen und dann in die Parameter des Ziellinks eingefügt wird. Der Wrapper bewahrt alle anderen Funktionen von Link, während er die Sprachkontinuität über die Navigation hinweg sicherstellt.

Schritte

1. Erstellen Sie eine sprachbewusste Link-Wrapper-Komponente

Erstellen Sie eine Komponente, die die aktuelle Sprache liest und automatisch in die Navigationsparameter einfügt.

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} />;
}

Diese Komponente verwendet useParams mit strict: false, um auf Parameter von jeder Route in der Anwendung zuzugreifen, extrahiert den aktuellen locale und führt ihn mit dem params-Prop zusammen, das an die zugrunde liegende Link übergeben wird. Der Spread-Operator stellt sicher, dass explizit bereitgestellte Parameter Vorrang haben.

Ersetzen Sie Standard-Link-Komponenten durch LocaleLink in Ihrer gesamten Anwendung.

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>
  );
}

Wenn ein Benutzer /fr/products besucht, lösen alle LocaleLink-Komponenten automatisch zu /fr/about, /fr/contact und /fr/products/123 auf. Der Locale-Parameter wird ohne manuelle Intervention an jeder Link-Stelle beibehalten.

3. Behandeln Sie den Locale-Wechsel bei Bedarf explizit

Für Sprachumschalter-Komponenten umgehen Sie die automatische Locale-Injektion, indem Sie den Standard-Link direkt verwenden.

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>
  );
}