Wie man die Locale in Navigationslinks in TanStack Start v1 beibehält

Problem

Wenn Gebietsschema-Informationen im URL-Pfad codiert sind, muss jeder Navigationslink dieses Gebietsschema beibehalten, um eine konsistente Benutzererfahrung zu gewährleisten. Wenn ein Benutzer die französische Version einer Website unter /fr/products durchsucht und auf einen Link zu /about klickt, landet er in der Standardsprache, was den Kontext seiner Sitzung unterbricht. Das Hardcoding von Gebietsschema-Parametern in jeden Link ist repetitiv und fehleranfällig, besonders wenn die Anwendung wächst und mehr Links in den Komponenten hinzugefügt werden.

Ohne einen systematischen Ansatz für gebietsschema-bewusste Navigation stehen Entwickler vor der Wahl, entweder das Gebietsschema manuell durch jede Link-Komponente zu führen oder zu akzeptieren, dass Benutzer unerwartet mitten in der Sitzung zur Standardsprache wechseln. Beide Ergebnisse verschlechtern die Benutzererfahrung und erhöhen den Wartungsaufwand.

Lösung

Erstellen Sie eine Wrapper-Komponente um das Link des Frameworks, die automatisch das aktuelle Gebietsschema aus der URL liest und es in den params-Prop jedes Navigationsziels einfügt. Durch die Zentralisierung dieser Logik in einer einzigen wiederverwendbaren Komponente erben alle internen Links gebietsschema-bewusstes Verhalten, ohne dass Entwickler manuell Gebietsschema-Parameter an jeder Aufrufstelle übergeben müssen.

Dieser Ansatz funktioniert, indem das aktive Gebietsschema aus den Routenparametern mit Hilfe der Router-Hooks gelesen und dann in die Parameter des Ziellinks eingefügt wird. Der Wrapper behält alle anderen Link-Funktionalitäten bei und stellt gleichzeitig die Kontinuität des Gebietsschemas über die Navigation hinweg sicher.

Schritte

1. Erstellen einer gebietsschema-bewussten Link-Wrapper-Komponente

Bauen Sie eine Komponente, die das aktuelle Gebietsschema liest und es automatisch in die Navigationsparameter einbezieht.

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 das aktuelle locale und fügt es in den params-Prop ein, der an den zugrunde liegenden Link übergeben wird. Der Spread-Operator stellt sicher, dass explizit bereitgestellte Parameter Vorrang haben.

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

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, werden alle LocaleLink-Komponenten automatisch zu /fr/about, /fr/contact und /fr/products/123 aufgelöst. Der Locale-Parameter wird ohne manuelle Eingriffe 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 direkt den Standard-Link 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>
  );
}