So speichern Sie die Sprachauswahl über Sitzungen hinweg in React Router v7

Problem

Wenn ein Benutzer explizit eine Sprache auswählt, spiegelt diese Wahl seine Präferenz wider und sollte jede automatische Erkennung überschreiben. Ohne Persistierung verschwindet diese Auswahl, wenn der Browser geschlossen wird oder die Sitzung endet. Beim nächsten Besuch startet die Anwendung neu und zwingt den Benutzer, seine Sprache erneut auszuwählen. Diese Wiederholung signalisiert, dass die Anwendung seine Präferenzen nicht respektiert, was Reibung erzeugt und das Vertrauen verringert.

Lösung

Speichern Sie die Sprachwahl des Benutzers an einem persistenten Ort wie einem Cookie, wenn er eine Auswahl trifft. Prüfen Sie bei nachfolgenden Besuchen diese gespeicherte Präferenz, bevor Sie auf Browser-Header oder andere Erkennungsmethoden zurückgreifen. Wenn eine gültige gespeicherte Sprache gefunden wird, leiten Sie den Benutzer automatisch zur Route dieser Sprache weiter. Dies stellt sicher, dass seine explizite Wahl Vorrang hat und über Sitzungen hinweg bestehen bleibt.

Schritte

Definieren Sie ein Cookie, das die vom Benutzer ausgewählte Sprache mit einer langen Ablaufzeit speichert.

import { createCookie } from "react-router";

export const languagePreference = createCookie("language-preference", {
  maxAge: 31536000,
  httpOnly: false,
  secure: process.env.NODE_ENV === "production",
  sameSite: "lax",
});

Dieses Cookie bleibt ein Jahr lang bestehen und ist für clientseitigen Code zum Lesen der Präferenz zugänglich.

2. Fügen Sie eine Action zum Speichern der Sprachauswahl hinzu

Erstellen Sie eine Action, die Formularübermittlungen zur Sprachauswahl verarbeitet und die Wahl im Cookie speichert.

import { redirect } from "react-router";
import type { Route } from "./+types/root";
import { languagePreference } from "./cookies";

export async function action({ request }: Route.ActionArgs) {
  const formData = await request.formData();
  const selectedLanguage = formData.get("language");

  if (typeof selectedLanguage === "string") {
    return redirect(`/${selectedLanguage}`, {
      headers: {
        "Set-Cookie": await languagePreference.serialize(selectedLanguage),
      },
    });
  }

  return redirect("/");
}

Wenn der Benutzer seine Sprachwahl übermittelt, speichert diese Action sie im Cookie und leitet ihn zur entsprechenden Sprach-Route weiter.

3. Erstellen Sie eine Komponente zur Sprachauswahl

Erstellen Sie eine Formularkomponente, die es Benutzern ermöglicht, ihre bevorzugte Sprache auszuwählen.

import { Form } from "react-router";

export function LanguageSelector({
  currentLanguage,
}: {
  currentLanguage: string;
}) {
  return (
    <Form method="post">
      <select
        name="language"
        defaultValue={currentLanguage}
        onChange={(e) => e.currentTarget.form?.requestSubmit()}
      >
        <option value="en">English</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
        <option value="de">Deutsch</option>
      </select>
    </Form>
  );
}

Diese Komponente sendet automatisch ab, wenn der Benutzer die Auswahl ändert, und löst die Aktion aus, die die Präferenz speichert.

4. Prüfung auf gespeicherte Präferenz im Root-Loader

Fügen Sie Logik zum Root-Route-Loader hinzu, die auf eine gespeicherte Sprachpräferenz prüft und entsprechend weiterleitet.

import { redirect } from "react-router";
import type { Route } from "./+types/root";
import { languagePreference } from "./cookies";

export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url);
  const cookieHeader = request.headers.get("Cookie");
  const storedLanguage = await languagePreference.parse(cookieHeader);

  if (url.pathname === "/" && storedLanguage) {
    return redirect(`/${storedLanguage}`);
  }

  return null;
}

Wenn ein Benutzer den Root-Pfad besucht, prüft dieser Loader auf eine gespeicherte Sprachpräferenz und leitet ihn zu seiner gewählten Sprachroute weiter, falls eine existiert.

5. Validierung der gespeicherten Sprache gegen unterstützte Locales

Stellen Sie sicher, dass die gespeicherte Präferenz gültig ist, bevor Sie sie für die Weiterleitung verwenden.

import { redirect } from "react-router";
import type { Route } from "./+types/root";
import { languagePreference } from "./cookies";

const SUPPORTED_LANGUAGES = ["en", "es", "fr", "de"];

export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url);
  const cookieHeader = request.headers.get("Cookie");
  const storedLanguage = await languagePreference.parse(cookieHeader);

  if (
    url.pathname === "/" &&
    storedLanguage &&
    SUPPORTED_LANGUAGES.includes(storedLanguage)
  ) {
    return redirect(`/${storedLanguage}`);
  }

  return null;
}

Diese Validierung verhindert die Weiterleitung zu ungültigen oder nicht unterstützten Sprachrouten, falls der Cookie-Wert manipuliert wurde oder sich die unterstützten Sprachen seit dem Speichern der Präferenz geändert haben.