@intlayer/docs 7.3.14 → 7.4.0

package/docs/de/intlayer_with_vite+react.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2024-03-07
-title: Wie Sie Ihre Vite and React übersetzen – i18n-Leitfaden 2025
+updatedAt: 2025-12-10
+title: Wie Sie Ihre Vite- und React-Anwendung übersetzen – i18n-Leitfaden 2025
 description: Erfahren Sie, wie Sie Internationalisierung (i18n) zu Ihrer Vite- und React-Anwendung mit Intlayer hinzufügen. Folgen Sie dieser Anleitung, um Ihre App mehrsprachig zu machen.
 keywords:
   - Internationalisierung
@@ -16,26 +16,22 @@ slugs:
   - environment
   - vite-and-react
 applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
-youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4---
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
 history:
   - version: 5.5.10
     date: 2025-06-29
     changes: Historie initialisiert
 ---
 
-# Erste Schritte zur Internationalisierung (i18n) mit Intlayer, Vite und React
+# Übersetzen Sie Ihre Vite- und React-Website mit Intlayer | Internationalisierung (i18n)
 
 ## Inhaltsverzeichnis
 
 <TOC/>
 
-<iframe title="The best i18n solution for Vite and React? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
-
-Siehe [Application Template](https://github.com/aymericzip/intlayer-vite-react-template) auf GitHub.
-
 ## Was ist Intlayer?
 
-**Intlayer** ist eine innovative, Open-Source Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen.
+**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:
 
@@ -48,6 +44,27 @@ Mit Intlayer können Sie:
 
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Vite- und React-Anwendung
 
+<Tab defaultTab="video">
+  <TabItem label="Video" value="video">
+  
+<iframe title="The best i18n solution for Vite and React? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
+
+  </TabItem>
+  <TabItem label="Code" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-vite-react-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </TabItem>
+</Tab>
+
+Siehe [Application Template](https://github.com/aymericzip/intlayer-vite-react-template) auf GitHub.
+
 ### Schritt 1: Abhängigkeiten installieren
 
 Installieren Sie die notwendigen Pakete mit npm:
@@ -69,7 +86,7 @@ yarn add vite-intlayer --save-dev
 
 - **intlayer**
 
-  Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, [Inhaltserklärung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md), Transpilierung und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md) bereitstellt.
+Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, [Inhaltserklärung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md), Transpilierung und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/index.md) bereitstellt.
 
 - **react-intlayer**
   Das Paket, das Intlayer in React-Anwendungen integriert. Es stellt Kontext-Provider und Hooks für die Internationalisierung in React bereit.
@@ -141,7 +158,7 @@ module.exports = config;
 
 ### Schritt 3: Integrieren Sie Intlayer in Ihre Vite-Konfiguration
 
-Fügen Sie das Intlayer-Plugin in Ihre Konfiguration ein.
+Fügen Sie das intlayer-Plugin in Ihre Konfiguration ein.
 
 ```typescript fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
@@ -193,11 +210,13 @@ const appContent = {
       en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
+      de: "Vite-Logo",
     }),
     reactLogo: t({
       en: "React logo",
       fr: "Logo React",
       es: "Logo React",
+      de: "React-Logo",
     }),
 
     title: "Vite + React",
@@ -206,13 +225,13 @@ const appContent = {
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
+      de: "Der Zähler ist ",
     }),
 
     edit: t<ReactNode>({
       en: (
         <>
-          Bearbeiten Sie <code>src/App.tsx</code> und speichern Sie, um HMR zu
-          testen
+          Edit <code>src/App.tsx</code> and save to test HMR
         </>
       ),
       fr: (
@@ -225,12 +244,19 @@ const appContent = {
           Edita <code>src/App.tsx</code> y guarda para probar HMR
         </>
       ),
+      de: (
+        <>
+          Bearbeiten Sie <code>src/App.tsx</code> und speichern Sie, um HMR zu
+          testen
+        </>
+      ),
     }),
 
     readTheDocs: t({
-      en: "Klicken Sie auf die Vite- und React-Logos, um mehr zu erfahren",
+      en: "Click on the Vite and React logos to learn more",
       fr: "Cliquez sur les logos Vite et React pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y React para obtener más información",
+      de: "Klicken Sie auf die Vite- und React-Logos, um mehr zu erfahren",
     }),
   },
 } satisfies Dictionary;
@@ -287,7 +313,7 @@ const appContent = {
       },
 
     readTheDocs: t({
-      en: "Klicken Sie auf die Vite- und React-Logos, um mehr zu erfahren",
+      en: "Click on the Vite and React logos to learn more",
       fr: "Cliquez sur les logos Vite et React pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y React para obtener más información",
     }),
@@ -340,8 +366,7 @@ const appContent = {
         ),
         es: (
           <>
-            Editieren Sie <code>src/App.tsx</code> und speichern Sie, um HMR zu
-            testen
+            Edita <code>src/App.tsx</code> y guarda para probar HMR
           </>
         ),
       },
@@ -418,9 +443,9 @@ module.exports = appContent;
 }
 ```
 
-> Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, sobald sie in das `contentDir`-Verzeichnis (standardmäßig `./src`) aufgenommen werden. Und die Dateiendung der Inhaltsdeklaration muss übereinstimmen (standardmäßig `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
+Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, sobald sie in das `contentDir`-Verzeichnis (standardmäßig `./src`) aufgenommen werden. Und die Dateiendung der Inhaltsdeklaration muss übereinstimmen (standardmäßig `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
 
-> Für weitere Details siehe die [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md).
+> Für weitere Details siehe die [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md).
 
 > Wenn Ihre Inhaltsdatei TSX-Code enthält, sollten Sie in Ihrer Inhaltsdatei `import React from "react";` importieren.
 
@@ -569,19 +594,13 @@ const App = () => (
 module.exports = App;
 ```
 
-> Wenn Sie Ihren Inhalt in einem `string`-Attribut verwenden möchten, wie z.B. `alt`, `title`, `href`, `aria-label` usw., müssen Sie den Wert der Funktion aufrufen, wie:
+> Wenn Sie Ihren Inhalt in einem `string`-Attribut verwenden möchten, wie z. B. `alt`, `title`, `href`, `aria-label` usw., müssen Sie den Wert der Funktion aufrufen, zum Beispiel:
 
 > ```jsx
 > <img src={content.image.src.value} alt={content.image.value} />
 > ```
 
-> Wenn Sie Ihren Inhalt in einem `string`-Attribut verwenden möchten, wie z.B. `alt`, `title`, `href`, `aria-label` usw., müssen Sie den Wert der Funktion aufrufen, zum Beispiel:
-
-> ```jsx
-> <img src={content.image.src.value} alt={content.image.value} />
-> ```
-
-> Um mehr über den `useIntlayer` Hook zu erfahren, lesen Sie die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useIntlayer.md).
+> Um mehr über den `useIntlayer` Hook zu erfahren, lesen Sie die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md).
 
 ### (Optional) Schritt 6: Ändern Sie die Sprache Ihres Inhalts
 
@@ -633,7 +652,7 @@ const LocaleSwitcher = () => {
 };
 ```
 
-> Um mehr über den `useLocale` Hook zu erfahren, lesen Sie die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useLocale.md).
+> Um mehr über den `useLocale` Hook zu erfahren, lesen Sie die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md).
 
 ### (Optional) Schritt 7: Lokalisierte Routen zu Ihrer Anwendung hinzufügen
 
@@ -651,82 +670,10 @@ Beispiel:
 Um lokalisierte Routen in Ihre Anwendung hinzuzufügen, können Sie eine `LocaleRouter`-Komponente erstellen, die die Routen Ihrer Anwendung umschließt und die sprachabhängige Navigation verwaltet. Hier ist ein Beispiel unter Verwendung von [React Router](https://reactrouter.com/home):
 
 ```tsx fileName="src/components/LocaleRouter.tsx"  codeFormat="typescript"
-// Importieren der notwendigen Abhängigkeiten und Funktionen
-import { type Locales, configuration, getPathWithoutLocale } from "intlayer"; // Dienstprogramme und Typen von 'intlayer'
+import { localeMap } from "intlayer"; // Dienstprogramme und Typen von 'intlayer'
 import type { FC, PropsWithChildren } from "react"; // React-Typen für funktionale Komponenten und Props
 import { IntlayerProvider } from "react-intlayer"; // Provider für Internationalisierungskontext
-import {
-  BrowserRouter,
-  Routes,
-  Route,
-  Navigate,
-  useLocation,
-} from "react-router-dom"; // Router-Komponenten zur Verwaltung der Navigation
-
-// Destrukturierung der Konfiguration von Intlayer
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-/**
- * Eine Komponente, die die Lokalisierung verwaltet und Kinder mit dem entsprechenden Locale-Kontext umschließt.
- * Sie verwaltet die URL-basierte Lokalerkennung und -validierung.
- */
-const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
-  children,
-  locale,
-}) => {
-  const { pathname, search } = useLocation(); // Aktuellen URL-Pfad abrufen
-
-  // Bestimmen der aktuellen Locale, Standardwert verwenden, falls nicht angegeben
-  const currentLocale = locale ?? defaultLocale;
-
-  // Entfernen des Locale-Präfixes aus dem Pfad, um einen Basis-Pfad zu erstellen
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // Aktueller URL-Pfad
-  );
-
-  /**
-   * Wenn middleware.prefixDefault true ist, sollte die Standard-Locale immer vorangestellt werden.
-   */
-  if (middleware.prefixDefault) {
-    // Locale validieren
-    if (!locale || !locales.includes(locale)) {
-      // Weiterleitung zur Standard-Locale mit aktualisiertem Pfad
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // Ersetzt den aktuellen Eintrag im Verlauf durch den neuen
-        />
-      );
-    }
-
-    // Umschließt die Kinder mit dem IntlayerProvider und setzt die aktuelle Locale
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * Wenn middleware.prefixDefault false ist, wird die Standardsprache nicht mit einem Präfix versehen.
-     * Stellen Sie sicher, dass die aktuelle Locale gültig ist und nicht die Standardsprache ist.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (locale) => locale.toString() !== defaultLocale.toString() // Schließt die Standardsprache aus
-        )
-        .includes(currentLocale) // Überprüfen, ob die aktuelle Locale in der Liste der gültigen Locales enthalten ist
-    ) {
-      // Weiterleitung zum Pfad ohne Locale-Präfix
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // Kinder mit dem IntlayerProvider umschließen und die aktuelle Locale setzen
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
+import { BrowserRouter, Route, Routes } from "react-router-dom"; // Router-Komponenten zur Verwaltung der Navigation
 
 /**
  * Eine Router-Komponente, die locale-spezifische Routen einrichtet.
@@ -735,257 +682,81 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
 export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
   <BrowserRouter>
     <Routes>
-      {locales
-        .filter(
-          (locale) => middleware.prefixDefault || locale !== defaultLocale
-        )
-        .map((locale) => (
-          <Route
-            // Routenmuster, um die Locale zu erfassen (z.B. /en/, /fr/) und alle nachfolgenden Pfade zu erfassen
-            path={`/${locale}/*`}
-            key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Umschließt die Kinder mit der Locale-Verwaltung
-          />
-        ))}
-
-      {
-        // Wenn das Präfix für die Standard-Locale deaktiviert ist, werden die Kinder direkt im Stammverzeichnis gerendert
-        !middleware.prefixDefault && (
-          <Route
-            path="*"
-            element={
-              <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // Umschließt die Kinder mit der Locale-Verwaltung
-          />
-        )
-      }
+      {localeMap(({ locale, urlPrefix }) => (
+        <Route
+          // Routenmuster zur Erfassung der Locale (z. B. /en/, /fr/) und zum Abgleich aller nachfolgenden Pfade
+          path={`${urlPrefix}/*`}
+          key={locale}
+          element={
+            <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+          } // Umschließt die Kinder mit der Locale-Verwaltung
+        />
+      ))}
     </Routes>
   </BrowserRouter>
 );
 ```
 
 ```jsx fileName="src/components/LocaleRouter.mjx" codeFormat="esm"
-// Importieren der notwendigen Abhängigkeiten und Funktionen
-import { configuration, getPathWithoutLocale } from "intlayer"; // Dienstprogramme und Typen von 'intlayer'
-// Dienstprogramme und Typen von 'intlayer'
-import { IntlayerProvider } from "react-intlayer"; // Provider für den Internationalisierungskontext
-import {
-  BrowserRouter,
-  Routes,
-  Route,
-  Navigate,
-  useLocation,
-} from "react-router-dom"; // Router-Komponenten zur Verwaltung der Navigation
-
-// Destrukturierung der Konfiguration von Intlayer
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-/**
- * Eine Komponente, die die Lokalisierung verwaltet und Kinder mit dem entsprechenden Locale-Kontext umschließt.
-/**
- * Es verwaltet die auf der URL basierende Lokalisierungserkennung und -validierung.
- */
-const AppLocalized = ({ children, locale }) => {
-  const { pathname, search } = useLocation(); // Holt den aktuellen URL-Pfad
-
-  // Bestimmt die aktuelle Locale, standardmäßig die Standard-Locale, falls keine angegeben ist
-  const currentLocale = locale ?? defaultLocale;
-
-  // Entfernt das Locale-Präfix aus dem Pfad, um einen Basis-Pfad zu erstellen
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // Aktueller URL-Pfad
-  );
-
-  /**
-   * Wenn middleware.prefixDefault true ist, sollte die Standard-Locale immer als Präfix verwendet werden.
-   */
-  if (middleware.prefixDefault) {
-    // Validiert die Locale
-    if (!locale || !locales.includes(locale)) {
-      // Weiterleitung zur Standard-Locale mit dem aktualisierten Pfad
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // Ersetzt den aktuellen Eintrag im Verlauf durch den neuen
-        />
-      );
-    }
-
-    // Umschließt die Kinder mit dem IntlayerProvider und setzt die aktuelle Locale
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * Wenn middleware.prefixDefault false ist, wird die Standard-Locale nicht vorangestellt.
-     * Stelle sicher, dass die aktuelle Locale gültig ist und nicht die Standard-Locale ist.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (locale) => locale.toString() !== defaultLocale.toString() // Schließt die Standard-Locale aus
-        )
-        .includes(currentLocale) // Überprüfen, ob die aktuelle Locale in der Liste der gültigen Locales enthalten ist
-    ) {
-      // Weiterleitung zum Pfad ohne Locale-Präfix
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // Kinder mit dem IntlayerProvider umschließen und die aktuelle Locale setzen
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
+import { localeMap } from 'intlayer'; // Dienstprogramme und Typen von 'intlayer'
+import type { FC, PropsWithChildren } from 'react'; // React-Typen für funktionale Komponenten und Props
+import { IntlayerProvider } from 'react-intlayer'; // Provider für den Internationalisierungskontext
+import { BrowserRouter, Route, Routes } from 'react-router-dom'; // Router-Komponenten zur Verwaltung der Navigation
 
 /**
  * Eine Router-Komponente, die locale-spezifische Routen einrichtet.
  * Sie verwendet React Router, um die Navigation zu verwalten und lokalisierte Komponenten zu rendern.
  */
-export const LocaleRouter = ({ children }) => (
+export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
   <BrowserRouter>
     <Routes>
-      {locales
-        .filter(
-          (locale) => middleware.prefixDefault || locale !== defaultLocale
-        )
-        .map((locale) => (
-          <Route
-            // Routenmuster, um die Locale zu erfassen (z.B. /en/, /fr/) und alle nachfolgenden Pfade abzugleichen
-            path={`/${locale}/*`}
-            key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Umschließt die Kinder mit der Locale-Verwaltung
-          />
-        ))}
-
-      {
-        // Wenn das Präfix für die Standard-Locale deaktiviert ist, werden die Kinder direkt im Stammverzeichnis gerendert
-        !middleware.prefixDefault && (
-          <Route
-            path="*"
-            element={
-              <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // Umschließt die Kinder mit der Locale-Verwaltung
-          />
-        )
-      }
+      {localeMap(({ locale, urlPrefix }) => (
+        <Route
+          // Routenmuster zur Erfassung der Locale (z. B. /en/, /fr/) und zum Abgleich aller nachfolgenden Pfade
+          path={`${urlPrefix}/*`}
+          key={locale}
+          element={
+            <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+          } // Umschließt die Kinder mit der Locale-Verwaltung
+        />
+      ))}
     </Routes>
   </BrowserRouter>
 );
 ```
 
 ```jsx fileName="src/components/LocaleRouter.cjx" codeFormat="commonjs"
-// Importieren der notwendigen Abhängigkeiten und Funktionen
-const { configuration, getPathWithoutLocale } = require("intlayer"); // Dienstprogramme und Typen von 'intlayer'
-const { IntlayerProvider, useLocale } = require("react-intlayer"); // Provider für den Internationalisierungskontext
-const {
-  BrowserRouter,
-  Routes,
-  Route,
-  Navigate,
-  useLocation,
-} = require("react-router-dom"); // Router-Komponenten zur Verwaltung der Navigation
-
-// Destrukturierung der Konfiguration von Intlayer
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
+const { localeMap } = require("intlayer"); // Dienstprogramme und Typen von 'intlayer'
+const React = require("react"); // React importieren
+const { IntlayerProvider } = require("react-intlayer"); // Provider für den Internationalisierungskontext
+const { BrowserRouter, Route, Routes } = require("react-router-dom"); // Router-Komponenten zur Verwaltung der Navigation
 
 /**
- * Eine Komponente, die die Lokalisierung verwaltet und die Kinder mit dem entsprechenden Lokalisierungskontext umschließt.
- * Sie verwaltet die URL-basierte Lokalerkennung und Validierung.
- */
-const AppLocalized = ({ children, locale }) => {
-  const { pathname, search } = useLocation(); // Hole den aktuellen URL-Pfad
-
-  // Bestimme die aktuelle Locale, standardmäßig auf die Default-Locale zurückfallend, falls nicht angegeben
-  const currentLocale = locale ?? defaultLocale;
-
-  // Entferne das Locale-Präfix aus dem Pfad, um einen Basis-Pfad zu erstellen
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // Aktueller URL-Pfad
-  );
-
-  /**
-   * Wenn middleware.prefixDefault true ist, sollte die Default-Locale immer vorangestellt werden.
-   */
-  if (middleware.prefixDefault) {
-    // Überprüfe die Locale
-    if (!locale || !locales.includes(locale)) {
-      // Weiterleitung zur Default-Locale mit dem aktualisierten Pfad
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // Ersetzt den aktuellen Eintrag in der Historie durch den neuen
-        />
-      );
-    }
-
-    // Umschließt die Kinder mit dem IntlayerProvider und setzt die aktuelle Locale
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * Wenn middleware.prefixDefault false ist, wird die Standard-Locale nicht vorangestellt.
-     * Stelle sicher, dass die aktuelle Locale gültig ist und nicht die Standard-Locale ist.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (locale) => locale.toString() !== defaultLocale.toString() // Schließt die Standard-Locale aus
-        )
-        .includes(currentLocale) // Prüft, ob die aktuelle Locale in der Liste der gültigen Locales ist
-    ) {
-      // Weiterleitung zum Pfad ohne Sprachpräfix
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // Kinder mit dem IntlayerProvider umschließen und die aktuelle Sprache setzen
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-/**
- * Eine Router-Komponente, die sprachspezifische Routen einrichtet.
+ * Eine Router-Komponente, die locale-spezifische Routen einrichtet.
  * Sie verwendet React Router, um die Navigation zu verwalten und lokalisierte Komponenten zu rendern.
  */
-const LocaleRouter = ({ children }) => (
-  <BrowserRouter>
-    <Routes>
-      {locales
-        .filter(
-          (locale) => middleware.prefixDefault || locale !== defaultLocale
-        )
-        .map((locale) => (
-          <Route
-            // Routenmuster, um die Sprache zu erfassen (z.B. /en/, /fr/) und alle nachfolgenden Pfade zu erfassen
-            path={`/${locale}/*`}
-            key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Umschließt Kinder mit der Sprachverwaltung
-          />
-        ))}
+const LocaleRouter = ({ children }) =>
+  React.createElement(
+    BrowserRouter,
+    {},
+    React.createElement(
+      Routes,
+      {},
+      localeMap(({ locale, urlPrefix }) =>
+        React.createElement(Route, {
+          path: `${urlPrefix}/*`,
+          key: locale,
+          element: React.createElement(IntlayerProvider, { locale }, children),
+        })
+      )
+    )
+  );
 
-      {
-        // Wenn das Präfix für die Standardsprache deaktiviert ist, rendere die Kinder direkt im Stammverzeichnis
-        !middleware.prefixDefault && (
-          <Route
-            path="*"
-            element={
-              <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // Umschließt Kinder mit der Sprachverwaltung
-          />
-        )
-      }
-    </Routes>
-  </BrowserRouter>
-);
+exports.LocaleRouter = LocaleRouter;
 ```
 
+> Hinweis: Wenn Sie `routing.mode: 'no-prefix' | 'search-params'` verwenden, müssen Sie die Funktion `localeMap` wahrscheinlich nicht verwenden.
+
 Dann können Sie die Komponente `LocaleRouter` in Ihrer Anwendung verwenden:
 
 ```tsx fileName="src/App.tsx" codeFormat="typescript"
@@ -1027,6 +798,8 @@ const App = () => (
 
 Parallel dazu können Sie auch das `intlayerProxy` verwenden, um serverseitiges Routing in Ihre Anwendung zu integrieren. 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 passendste Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wird keine Locale erkannt, erfolgt eine Weiterleitung zur Standard-Locale.
 
+> Beachten Sie, dass Sie für die Verwendung von `intlayerProxy` in der Produktion das Paket `vite-intlayer` von `devDependencies` zu `dependencies` verschieben müssen.
+
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
@@ -1062,7 +835,7 @@ module.exports = defineConfig({
 
 ### (Optional) Schritt 8: URL ändern, wenn sich die Sprache ändert
 
-Um die URL zu ändern, wenn sich die Sprache ändert, können Sie die `onLocaleChange`-Eigenschaft verwenden, die vom `useLocale`-Hook bereitgestellt wird. Parallel dazu können Sie die Hooks `useLocation` und `useNavigate` von `react-router-dom` verwenden, um den URL-Pfad zu aktualisieren.
+Um die URL zu ändern, wenn sich die Locale ändert, können Sie die `onLocaleChange`-Eigenschaft verwenden, die vom `useLocale`-Hook bereitgestellt wird. Parallel dazu können Sie die Hooks `useLocation` und `useNavigate` von `react-router-dom` verwenden, um den URL-Pfad zu aktualisieren.
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
 import { useLocation, useNavigate } from "react-router-dom";
@@ -1259,10 +1032,10 @@ const LocaleSwitcher = () => {
 
 > Dokumentationsreferenzen:
 >
-> - [`useLocale` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useLocale.md)
-> - [`getLocaleName` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getLocaleName.md)
-> - [`getLocalizedUrl` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getLocalizedUrl.md)
-> - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getHTMLTextDir.md)
+> - [`useLocale` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)
+> - [`getLocaleName` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getLocaleName.md)
+> - [`getLocalizedUrl` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getLocalizedUrl.md)
+> - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getHTMLTextDir.md)
 > - [`hrefLang` Attribut](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
 > - [`lang` Attribut](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/lang)
 > - [`dir` Attribut](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/dir)
@@ -1284,7 +1057,7 @@ Indem Sie diese Attribute dynamisch aktualisieren, wenn sich die Spracheinstellu
 
 #### Implementierung des Hooks
 
-Erstellen Sie einen benutzerdefinierten Hook, um die HTML-Attribute zu verwalten. Der Hook hört auf Änderungen der Spracheinstellung und aktualisiert die Attribute entsprechend:
+Erstellen Sie einen benutzerdefinierten Hook, um die HTML-Attribute zu verwalten. Der Hook hört auf Änderungen der Locale und aktualisiert die Attribute entsprechend:
 
 ```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
 import { useEffect } from "react";
@@ -1292,7 +1065,7 @@ import { useLocale } from "react-intlayer";
 import { getHTMLTextDir } from "intlayer";
 
 /**
- * Aktualisiert die `lang`- und `dir`-Attribute des HTML-Elements `<html>` basierend auf der aktuellen Spracheinstellung.
+ * Aktualisiert die `lang`- und `dir`-Attribute des HTML-Elements `<html>` basierend auf der aktuellen Locale.
  * - `lang`: Informiert Browser und Suchmaschinen über die Sprache der Seite.
  * - `dir`: Stellt die korrekte Leserichtung sicher (z.B. 'ltr' für Englisch, 'rtl' für Arabisch).
  *
@@ -1365,32 +1138,6 @@ module.exports = { useI18nHTMLAttributes };
 
 #### Verwendung des Hooks in Ihrer Anwendung
 
-Integrieren Sie den Hook in Ihre Hauptkomponente, damit die HTML-Attribute bei jeder Änderung der Locale aktualisiert werden:
-
-```tsx fileName="src/App.tsx" codeFormat="typescript"
-import type { FC } from "react";
-import { IntlayerProvider, useIntlayer } from "react-intlayer";
-import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
-import "./App.css";
-
-const AppContent: FC = () => {
-  // Wenden Sie den Hook an, um die lang- und dir-Attribute des <html>-Tags basierend auf der Locale zu aktualisieren.
-  useI18nHTMLAttributes();
-
-  // ... Rest Ihrer Komponente
-};
-
-const App: FC = () => (
-  <IntlayerProvider>
-    <AppContent />
-  </IntlayerProvider>
-);
-
-export default App;
-```
-
-#### Verwendung des Hooks in Ihrer Anwendung
-
 Integrieren Sie den Hook in Ihre Hauptkomponente, damit die HTML-Attribute aktualisiert werden, sobald sich die Locale ändert:
 
 ```tsx fileName="src/App.tsx" codeFormat="typescript"
@@ -1466,14 +1213,6 @@ Durch diese Änderungen wird Ihre Anwendung:
 
 ### (Optional) Schritt 10: Erstellen einer lokalisierten Link-Komponente
 
-Durch die Anwendung dieser Änderungen wird Ihre Anwendung:
-
-- Sicherstellen, dass das **Sprach**-Attribut (`lang`) die aktuelle Locale korrekt widerspiegelt, was wichtig für SEO und das Verhalten des Browsers ist.
-- Die **Schreibrichtung** (`dir`) entsprechend der Locale anpassen, um die Lesbarkeit und Benutzerfreundlichkeit für Sprachen mit unterschiedlichen Leserichtungen zu verbessern.
-- Eine zugänglichere **Benutzererfahrung** bieten, da unterstützende Technologien auf diese Attribute angewiesen sind, um optimal zu funktionieren.
-
-### (Optional) Schritt 10: Erstellen einer lokalisierten Link-Komponente
-
 Um sicherzustellen, dass die Navigation Ihrer Anwendung die aktuelle Sprache berücksichtigt, können Sie eine benutzerdefinierte `Link`-Komponente erstellen. Diese Komponente fügt automatisch den aktuellen Sprachpräfix zu internen URLs hinzu. Zum Beispiel wird ein französischsprachiger Benutzer, der auf einen Link zur "Über uns"-Seite klickt, zu `/fr/about` statt zu `/about` weitergeleitet.
 
 Dieses Verhalten ist aus mehreren Gründen nützlich:
@@ -1493,11 +1232,10 @@ import {
 } from "react";
 import { useLocale } from "react-intlayer";
 
-export interface LinkProps
-  extends DetailedHTMLProps<
-    AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
-  > {}
+export interface LinkProps extends DetailedHTMLProps<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  HTMLAnchorElement
+> {}
 
 /**
  * Hilfsfunktion, um zu prüfen, ob eine gegebene URL extern ist.
@@ -1622,7 +1360,7 @@ Indem Sie diese `Link`-Komponente in Ihrer gesamten Anwendung integrieren, gewä
 
 ### TypeScript konfigurieren
 
-Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Codebasis robuster zu machen.
+Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihre Codebasis robuster zu machen.
 
 ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
@@ -1642,18 +1380,18 @@ Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generiert
 
 ### Git-Konfiguration
 
-Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dadurch vermeiden Sie, diese versehentlich in Ihr Git-Repository zu committen.
+Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dadurch vermeiden Sie, diese in Ihr Git-Repository zu committen.
 
 Fügen Sie dazu folgende Anweisungen in Ihre `.gitignore`-Datei ein:
 
-```plaintext
-# Übersetzen Sie Ihre Vite and React mit Intlayer | Internationalisierung (i18n)
+```plaintext fileName=".gitignore"
+# Ignoriere die von Intlayer generierten Dateien
 .intlayer
 ```
 
 ### VS Code Erweiterung
 
-Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle **Intlayer VS Code Erweiterung** installieren.
+Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle **Intlayer VS Code Extension** installieren.
 
 [Installation aus dem VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
@@ -1671,5 +1409,3 @@ Für weitere Details zur Nutzung der Erweiterung siehe die [Intlayer VS Code Ext
 ### Weiterführende Schritte
 
 Um weiterzugehen, können Sie den [visuellen Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md) implementieren oder Ihre Inhalte mit dem [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md) auslagern.
-
----