Wie man die Locale in Navigationslinks in React Router v7 beibehält

Locale über interne Navigation hinweg beibehalten

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 Ihrer Website durchsucht und auf einen Link zu /about klickt, erwartet er, in Französisch zu bleiben und zu /fr/about zu navigieren. Ohne gebietsschema-bewusste Links werden Benutzer mitten in der Sitzung in die Standardsprache versetzt, was ihren Browsing-Kontext unterbricht und sie zwingt, die Sprache manuell wieder umzuschalten. Dies erzeugt Reibung und untergräbt die lokalisierte Erfahrung.

Das Hardcoding des Gebietsschema-Präfixes in jeden Link ist fehleranfällig und macht die Codebasis brüchig. Während Benutzer durch die Anwendung navigieren, kann sich das aktive Gebietsschema ändern, und das manuelle Aktualisieren hunderter Links wird unhaltbar.

Lösung

Erstellen Sie eine benutzerdefinierte Link-Komponente, die automatisch das aktuelle Gebietsschema aus der URL liest und es allen internen Navigationspfaden voranstellt. Indem Sie React Routers Link-Komponente umhüllen, zentralisieren Sie die Gebietsschema-Handhabung an einem Ort. Der Wrapper extrahiert den Gebietsschema-Parameter aus der aktuellen Route und stellt sicher, dass jeder Zielpfad diesen enthält, sodass die Navigation die Sprachauswahl des Benutzers ohne manuelles Eingreifen beibehält.

Dieser Ansatz hält Link-Definitionen in Ihrer gesamten Anwendung sauber und gebietsschema-agnostisch, während er garantiert, dass der Gebietsschema-Kontext bei jedem Klick mitreist.

Schritte

Bauen Sie eine benutzerdefinierte Komponente, die useParams verwendet, um das aktuelle Gebietsschema aus der URL zu extrahieren, und umhüllen Sie React Routers Link-Komponente, um dem Zielpfad das Gebietsschema voranzustellen.

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

export function LocaleLink({ to, ...props }: LinkProps) {
  const { locale } = useParams<{ locale: string }>();

  const localizedTo =
    typeof to === "string"
      ? `/${locale}${to.startsWith("/") ? to : `/${to}`}`
      : {
          ...to,
          pathname: `/${locale}${to.pathname?.startsWith("/") ? to.pathname : `/${to.pathname}`}`,
        };

  return <Link to={localizedTo} {...props} />;
}

Diese Komponente liest den Gebietsschema-Parameter aus der aktuellen Route und stellt ihn automatisch jedem Pfad voran, den Sie an die to-Prop übergeben, wobei sowohl String- als auch Objekt-Formen behandelt werden.

Ersetzen Sie Standard-Link-Komponenten durch LocaleLink, wo immer Sie eine Locale-erhaltende Navigation benötigen.

import { LocaleLink } from "./LocaleLink";

export function Navigation() {
  return (
    <nav>
      <LocaleLink to="/">Home</LocaleLink>
      <LocaleLink to="/about">About</LocaleLink>
      <LocaleLink to="/products">Products</LocaleLink>
    </nav>
  );
}

Wenn ein Benutzer auf /fr/products auf den About-Link klickt, navigiert er zu /fr/about. Das Locale-Präfix wird automatisch hinzugefügt, ohne die Link-Definition zu überladen.

Erweitern Sie den Wrapper, um zu erkennen, wann ein Pfad bereits die Locale enthält oder auf eine externe URL verweist, um doppelte Präfixe oder fehlerhafte externe Navigation zu vermeiden.

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

export function LocaleLink({ to, ...props }: LinkProps) {
  const { locale } = useParams<{ locale: string }>();

  if (!locale) {
    return <Link to={to} {...props} />;
  }

  const isExternal =
    typeof to === "string" &&
    (to.startsWith("http://") || to.startsWith("https://"));
  const alreadyLocalized =
    typeof to === "string" && to.startsWith(`/${locale}/`);

  if (isExternal || alreadyLocalized) {
    return <Link to={to} {...props} />;
  }

  const localizedTo =
    typeof to === "string"
      ? `/${locale}${to.startsWith("/") ? to : `/${to}`}`
      : {
          ...to,
          pathname: `/${locale}${to.pathname?.startsWith("/") ? to.pathname : `/${to.pathname}`}`,
        };

  return <Link to={localizedTo} {...props} />;
}

Dies schützt vor doppelten Präfixen, wenn ein Pfad bereits mit der Locale beginnt, und leitet externe URLs unverändert weiter, wodurch sichergestellt wird, dass die Komponente in allen Navigationsszenarien zuverlässig funktioniert.