Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren
Versionshistorie
- "Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"v8.9.04.5.2026
- "Init-Befehl hinzufügen"v7.5.930.12.2025
- "Anfängliche Historie"v7.3.48.12.2025
Der Inhalt dieser Seite wurde mit einer KI übersetzt.
Den englischen Originaltext ansehenWenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.
GitHub-Link zur DokumentationMarkdown des Dokuments in die Zwischenablage kopieren
Übersetzen Sie Ihre React Router v7 (File-System Routes) mit Intlayer | Internationalisierung (i18n)
Diese Anleitung zeigt, wie Sie Intlayer für nahtlose Internationalisierung in React Router v7-Projekten mit dateisystembasiertem Routing (@react-router/fs-routes) mit lokalisierungsbewusstem Routing, TypeScript-Unterstützung und modernen Entwicklungsmethoden integrieren.
Für clientseitiges Routing lesen Sie bitte die Anleitung Intlayer mit React Router v7.
Inhaltsverzeichnis
Was ist Intlayer?
Intlayer ist eine innovative, Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen.
Mit Intlayer können Sie:
- Übersetzungen einfach verwalten durch deklarative Wörterbücher auf Komponentenebene.
- Metadaten, Routen und Inhalte dynamisch lokalisieren.
- TypeScript-Unterstützung sicherstellen mit automatisch generierten Typen, die Autovervollständigung und Fehlererkennung verbessern.
- Von erweiterten Funktionen profitieren, wie dynamische Lokalerkennung und -umschaltung.
- Aktivieren Sie lokalisierungsbewusstes Routing mit dem dateisystembasierten Routing-System von React Router v7.
Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer React Router v7-Anwendung mit dateisystembasierten Routen
See Application Template on GitHub.
Configure TypeScript
Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
Ensure your TypeScript configuration includes the autogenerated types:
Kopieren Sie den Code in die Zwischenablage
{ // ... your existing configurations include: [ // ... your existing includes ".intlayer/**/*.ts", // Include the auto-generated types ],}Git Configuration
It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.
To do this, you can add the following instructions to your .gitignore file:
Kopieren Sie den Code in die Zwischenablage
# Ignoriere die von Intlayer generierten Dateien.intlayerVS Code Extension
To improve your development experience with Intlayer, you can install the official Intlayer VS Code Extension.
Install from the VS Code Marketplace
This extension provides:
- Autocompletion for translation keys.
- Real-time error detection for missing translations.
- Inline previews of translated content.
- Quick actions to easily create and update translations.
For more details on how to use the extension, refer to the Intlayer VS Code Extension documentation.
Go Further
To go further, you can implement the visual editor or externalize your content using the CMS.
Documentation References
- Intlayer Documentation
- React Router v7 Documentation
- React Router fs-routes Documentation
- useIntlayer hook
- useLocale hook
- Content Declaration
- Configuration
This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 using file-system based routing for a fully internationalized application with locale-aware routing and TypeScript support.
Schritt 10: Middleware hinzufügen (Optional)
Sie können auch das intlayerProxy verwenden, um serverseitiges Routing zu Ihrer Anwendung hinzuzufügen. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die am besten geeignete Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Locale erkannt wird, erfolgt eine Weiterleitung zur Standard-Locale.
Beachten Sie, dass Sie, um dasintlayerProxyin der Produktion zu verwenden, das Paketvite-intlayervondevDependencieszudependenciesverschieben müssen.
Kopieren Sie den Code in die Zwischenablage
import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({ plugins: [ intlayerProxy(), // should be placed first reactRouter(), intlayer(), ],});Das intlayer() Vite-Plugin wird verwendet, um Intlayer mit Vite zu integrieren. Es sorgt für den Aufbau der Inhaltsdeklarationsdateien und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der Vite-Anwendung. Zusätzlich stellt es Aliase bereit, um die Leistung zu optimieren.
Schritt 4: Konfigurieren der dateisystembasierten Routen von React Router v7
Richten Sie Ihre Routing-Konfiguration ein, um dateisystembasierte Routen mit flatRoutes zu verwenden:
Kopieren Sie den Code in die Zwischenablage
import type { RouteConfig } from "@react-router/dev/routes";import { flatRoutes } from "@react-router/fs-routes";import { configuration } from "intlayer";const routes: RouteConfig = flatRoutes({ // Inhaltsdeklarationsdateien ignorieren, damit sie nicht als Routen behandelt werden ignoredRouteFiles: configuration.content.fileExtensions.map( (fileExtension) => `**/*${fileExtension}` ),});export default routes;Die FunktionflatRoutesvon@react-router/fs-routesaktiviert dateisystembasiertes Routing, bei dem die Dateistruktur im Verzeichnisroutes/die Routen Ihrer Anwendung bestimmt. Die OptionignoredRouteFilesstellt sicher, dass Intlayer-Inhaltsdeklarationsdateien (.content.ts, etc.) nicht als Routendateien behandelt werden.
Schritt 5: Routendateien mit Dateisystem-Konventionen erstellen
Beim dateisystembasierten Routing verwenden Sie eine flache Namenskonvention, bei der Punkte (.) Pfadsegmente darstellen und Klammern () optionale Segmente bezeichnen.
Erstellen Sie die folgenden Dateien in Ihrem Verzeichnis app/routes/:
Dateistruktur
Kopieren Sie den Code in die Zwischenablage
app/├── root.tsx # Layout-Wrapper für Locale-Routen└──routes/ ├── ($locale)._index.tsx # Startseite (/, /es, etc.) ├── ($locale)._index.content.ts # Startseiten-Inhalt ├── ($locale).about.tsx # Über-Seite (/about, /es/about, etc.) └── ($locale).about.content.ts # Über-Seiten-InhaltDie Namenskonventionen:
($locale)- Optionales dynamisches Segment für den Locale-Parameter_layout- Layout-Route, die untergeordnete Routen umschließt_index- Index-Route (wird am übergeordneten Pfad gerendert).(Punkt) - Trennt Pfadsegmente (z. B.($locale).about→/:locale?/about)
Layout-Komponente
Kopieren Sie den Code in die Zwischenablage
import { getLocaleFromPath } from "intlayer";import { IntlayerProvider } from "react-intlayer";import { isRouteErrorResponse, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData,} from "react-router";import type { Route } from "./+types/root";import "./app.css";// links and ErrorBoundary codeexport async function loader({ request }: Route.LoaderArgs) { const locale = getLocaleFromPath(request.url); return { locale };}export function Layout({ children,}: { children: React.ReactNode } & Route.ComponentProps) { const data = useLoaderData<typeof loader>(); const { locale } = data ?? {}; return ( <html lang={locale}> <head> <meta charSet="utf-8" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <Meta /> <Links /> </head> <body> <IntlayerProvider locale={locale}>{children}</IntlayerProvider> <ScrollRestoration /> <Scripts /> </body> </html> );}Index-Seite
Kopieren Sie den Code in die Zwischenablage
import { getIntlayer, validatePrefix } from "intlayer";import { useIntlayer } from "react-intlayer";import { data } from "react-router";import { LocaleSwitcher } from "~/components/locale-switcher";import { Navbar } from "~/components/navbar";import type { Route } from "./+types/($locale)._index";export const loader = ({ params }: Route.LoaderArgs) => { const { locale } = params; const { isValid } = validatePrefix(locale); if (!isValid) { throw data("Locale not supported", { status: 404 }); }};export const meta: Route.MetaFunction = ({ params }) => { const content = getIntlayer("page", params.locale); return [ { title: content.title }, { content: content.description, name: "description" }, ];};export default function Page() { const { title, description, aboutLink } = useIntlayer("page"); return ( <div> <h1>{title}</h1> <p>{description}</p> <nav> <LocalizedLink to="/about">{aboutLink}</LocalizedLink> </nav> </div> );}Über-Seite
Kopieren Sie den Code in die Zwischenablage
import { getIntlayer, validatePrefix } from "intlayer";import { useIntlayer } from "react-intlayer";import { data } from "react-router";import { LocaleSwitcher } from "~/components/locale-switcher";import { Navbar } from "~/components/navbar";import type { Route } from "./+types/($locale).about";export const loader = ({ params }: Route.LoaderArgs) => { const { locale } = params; const { isValid } = validatePrefix(locale); if (!isValid) { throw data("Locale not supported", { status: 404 }); }};export const meta: Route.MetaFunction = ({ params }) => { const content = getIntlayer("about", params.locale); return [ { title: content.title }, { content: content.description, name: "description" }, ];};export default function AboutPage() { const { title, content, homeLink } = useIntlayer("about"); return ( <div> <h1>{title}</h1> <p>{content}</p> <nav> <LocalizedLink to="/">{homeLink}</LocalizedLink> </nav> </div> );}Schritt 6: Deklarieren Sie Ihre Inhalte
Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern. Platzieren Sie Inhaltsdateien neben Ihren Routendateien:
Kopieren Sie den Code in die Zwischenablage
import { t, type Dictionary } from "intlayer";const pageContent = { key: "page", content: { title: t({ en: "Welcome to React Router v7 + Intlayer", es: "Bienvenido a React Router v7 + Intlayer", fr: "Bienvenue sur React Router v7 + Intlayer", }), description: t({ en: "Build multilingual applications with ease using React Router v7 and Intlayer.", es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.", fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.", }), aboutLink: t({ en: "Learn About Us", es: "Aprender Sobre Nosotros", fr: "En savoir plus sur nous", }), },} satisfies Dictionary;export default pageContent;Kopieren Sie den Code in die Zwischenablage
import { t, type Dictionary } from "intlayer";const aboutContent = { key: "about", content: { title: t({ en: "About Us", es: "Sobre Nosotros", fr: "À propos de nous", }), content: t({ en: "This is the about page content.", es: "Este es el contenido de la página de información.", fr: "Ceci est le contenu de la page à propos.", }), homeLink: t({ en: "Home", es: "Inicio", fr: "Accueil", }), },} satisfies Dictionary;export default aboutContent;Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, sobald sie in das VerzeichniscontentDiraufgenommen werden (standardmäßig./app). Und sie müssen der Dateierweiterung für Inhaltsdeklarationen entsprechen (standardmäßig.content.{json,ts,tsx,js,jsx,mjs,cjs}).
Für weitere Details siehe die Dokumentation zur Inhaltsdeklaration.
Wenn Ihre App bereits existiert, können Sie den Intlayer Compiler sowie den Extraktionsbefehl verwenden, um Tausende von Komponenten in einer Sekunde zu transformieren.
Schritt 7: Erstellen Sie locale-bewusste Komponenten
Erstellen Sie eine LocalizedLink-Komponente für locale-bewusste Navigation:
Kopieren Sie den Code in die Zwischenablage
import type { FC } from "react";import { getLocalizedUrl, type LocalesValues } from "intlayer";import { useLocale } from "react-intlayer";import { Link, type LinkProps, type To } from "react-router";const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);// Prüft, ob der Link extern istexport const locacalizeTo = (to: To, locale: LocalesValues): To => { if (typeof to === "string") { if (isExternalLink(to)) { return to; } return getLocalizedUrl(to, locale); } if (isExternalLink(to.pathname ?? "")) { return to; } return { ...to, pathname: getLocalizedUrl(to.pathname ?? "", locale), };};// Lokalisierter Link-Komponenten für die Navigationexport const LocalizedLink: FC<LinkProps> = (props) => { const { locale } = useLocale(); return <Link {...props} to={locacalizeTo(props.to, locale)} />;};Falls Sie zu den lokalisierten Routen navigieren möchten, können Sie den useLocalizedNavigate Hook verwenden:
Kopieren Sie den Code in die Zwischenablage
import { useLocale } from "react-intlayer";import { type NavigateOptions, type To, useNavigate } from "react-router";import { locacalizeTo } from "~/components/localized-link";export const useLocalizedNavigate = () => { const navigate = useNavigate(); const { locale } = useLocale(); const localizedNavigate = (to: To, options?: NavigateOptions) => { const localedTo = locacalizeTo(to, locale); navigate(localedTo, options); }; return localizedNavigate;};Schritt 8: Erstellen Sie eine Sprachumschalter-Komponente
Erstellen Sie eine Komponente, die es Benutzern ermöglicht, die Sprache zu wechseln:
Kopieren Sie den Code in die Zwischenablage
import type { FC } from "react";import { getHTMLTextDir, getLocaleName, getLocalizedUrl, getPathWithoutLocale, Locales,} from "intlayer";import { useIntlayer, useLocale } from "react-intlayer";import { Link, useLocation } from "react-router";export const LocaleSwitcher: FC = () => { const { localeSwitcherLabel } = useIntlayer("locale-switcher"); const { pathname } = useLocation(); const { availableLocales, locale } = useLocale(); const pathWithoutLocale = getPathWithoutLocale(pathname); return ( <ol> {availableLocales.map((localeItem) => ( <li key={localeItem}> <Link aria-current={localeItem === locale ? "page" : undefined} aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`} reloadDocument // Seite neu laden, um die neue Locale anzuwenden to={getLocalizedUrl(pathWithoutLocale, localeItem)} > <span> {/* Gebietsschema - z.B. FR */} {localeItem} </span> <span> {/* Sprache im eigenen Gebietsschema - z.B. Français */} {getLocaleName(localeItem, locale)} </span> <span dir={getHTMLTextDir(localeItem)} lang={localeItem}> {/* Sprache im aktuellen Gebietsschema - z.B. Francés mit aktuellem Gebietsschema auf Locales.SPANISH gesetzt */} {getLocaleName(localeItem)} </span> <span dir="ltr" lang={Locales.ENGLISH}> {/* Sprache auf Englisch - z.B. Französisch */} {getLocaleName(localeItem, Locales.ENGLISH)} </span> </Link> </li> ))} </ol> );};Um mehr über den useLocale Hook zu erfahren, siehe die Dokumentation.
Schritt 10: HTML-Attribute-Verwaltung hinzufügen (Optional)
Erstellen Sie einen Hook, um die HTML-Attribute lang und dir zu verwalten:
Kopieren Sie den Code in die Zwischenablage
import { getHTMLTextDir } from "intlayer";import { useEffect } from "react";import { useLocale } from "react-intlayer";export const useI18nHTMLAttributes = () => { const { locale } = useLocale(); useEffect(() => { document.documentElement.lang = locale; document.documentElement.dir = getHTMLTextDir(locale); }, [locale]);};Dieser Hook wird bereits in der Layout-Komponente (root.tsx) verwendet, die in Schritt 5 gezeigt wird.
(Optional) Schritt 11 : Inhalt Ihrer Komponenten extrahieren
Wenn Sie eine bestehende Codebasis haben, kann die Transformation von Tausenden von Dateien zeitaufwendig sein.
Um diesen Prozess zu erleichtern, bietet Intlayer einen Compiler / Extractor an, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren.
Um es einzurichten, können Sie einen compiler-Abschnitt in Ihrer intlayer.config.ts-Datei hinzufügen:
Kopieren Sie den Code in die Zwischenablage
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... Rest Ihrer Konfiguration
compiler: {
/**
* Gibt an, ob der Compiler aktiviert sein soll.
*/
enabled: true,
/**
* Definiert den Pfad der Ausgabedateien
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* Gibt an, ob die Komponenten nach der Transformation gespeichert werden sollen. Auf diese Weise kann der Compiler nur einmal ausgeführt werden, um die App zu transformieren, und dann entfernt werden.
*/
saveComponents: false,
/**
* Präfix für Wörterbuchschlüssel
*/
dictionaryKeyPrefix: "",
},
};
export default config;Führen Sie den Extractor aus, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren
Kopieren Sie den Code in die Zwischenablage
npx intlayer extractTypeScript konfigurieren
Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code stabiler zu machen.
Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält:
Kopieren Sie den Code in die Zwischenablage
{ // ... Ihre bestehenden Konfigurationen include: [ // ... Ihre bestehenden Includes ".intlayer/**/*.ts", // Einschluss der automatisch generierten Typen ],}Git-Konfiguration
Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. So vermeiden Sie, dass diese versehentlich in Ihr Git-Repository committet werden.
Fügen Sie dazu folgende Anweisungen in Ihre .gitignore-Datei ein:
Kopieren Sie den Code in die Zwischenablage
# Ignoriere die von Intlayer generierten Dateien.intlayerVS Code Erweiterung
Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle Intlayer VS Code Erweiterung installieren.
Installation aus dem VS Code Marketplace
Diese Erweiterung bietet:
- Autovervollständigung für Übersetzungsschlüssel.
- Echtzeit-Fehlererkennung für fehlende Übersetzungen.
- Inline-Vorschauen des übersetzten Inhalts.
- Schnellaktionen, um Übersetzungen einfach zu erstellen und zu aktualisieren.
Für weitere Details zur Nutzung der Erweiterung lesen Sie die Intlayer VS Code Erweiterungsdokumentation.
Weiterführende Schritte
Um weiterzugehen, können Sie den visuellen Editor implementieren oder Ihre Inhalte mit dem CMS auslagern.
Dokumentationsverweise
- Intlayer Dokumentation
- React Router v7 Dokumentation
- useIntlayer Hook
- useLocale Hook
- Inhaltsdeklaration
- Konfiguration
Dieser umfassende Leitfaden bietet alles, was Sie benötigen, um Intlayer mit React Router v7 für eine vollständig internationalisierte Anwendung mit lokalisierungsbewusstem Routing und TypeScript-Unterstützung zu integrieren.