@intlayer/docs 7.3.13 → 7.3.15

package/docs/hi/intlayer_with_vite+react.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2024-03-07
-title: अपना Vite and React ऐप कैसे अनुवाद करें – i18n गाइड 2025
+updatedAt: 2025-12-10
+title: अपना Vite और React एप्लिकेशन कैसे अनुवाद करें – i18n गाइड 2025
 description: जानें कि कैसे Intlayer का उपयोग करके अपने Vite और React एप्लिकेशन में अंतरराष्ट्रीयकरण (i18n) जोड़ें। इस गाइड का पालन करके अपनी ऐप को बहुभाषी बनाएं।
 keywords:
   - अंतरराष्ट्रीयकरण
@@ -16,23 +16,19 @@ 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: प्रारंभिक इतिहास
+    changes: Init history
 ---
 
-# Intlayer और Vite और React के साथ अंतरराष्ट्रीयकरण (i18n) शुरू करना
+# Intlayer का उपयोग करके अपनी Vite और React वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)
 
 ## विषय-सूची
 
 <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"/>
-
-GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-vite-react-template) देखें।
-
 ## Intlayer क्या है?
 
 **Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब एप्लिकेशन में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
@@ -48,6 +44,27 @@ Intlayer के साथ, आप कर सकते हैं:
 
 ## Vite और React एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
 
+<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>
+
+GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-vite-react-template) देखें।
+
 ### चरण 1: निर्भरताएँ स्थापित करें
 
 npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
@@ -68,8 +85,7 @@ yarn add vite-intlayer --save-dev
 ```
 
 - **intlayer**
-
-  मुख्य पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, [सामग्री घोषणा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/get_started.md), ट्रांसपाइलेशन, और [CLI कमांड्स](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_cli.md) के लिए अंतरराष्ट्रीयकरण उपकरण प्रदान करता है।
+  यह मुख्य पैकेज है जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, [सामग्री घोषणा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md), ट्रांसपाइलेशन, और [CLI कमांड्स](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/cli/index.md) के लिए अंतरराष्ट्रीयकरण उपकरण प्रदान करता है।
 
 - **react-intlayer**
   वह पैकेज जो Intlayer को React एप्लिकेशन के साथ एकीकृत करता है। यह React अंतरराष्ट्रीयकरण के लिए संदर्भ प्रदाता और हुक्स प्रदान करता है।
@@ -176,7 +192,7 @@ module.exports = defineConfig({
 });
 ```
 
-> `intlayer()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह कंटेंट घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।
+`intlayer()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह कंटेंट घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।
 
 ### चरण 4: अपनी सामग्री घोषित करें
 
@@ -193,11 +209,13 @@ const appContent = {
       en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
+      hi: "Vite लोगो",
     }),
     reactLogo: t({
       en: "React logo",
       fr: "Logo React",
       es: "Logo React",
+      hi: "React लोगो",
     }),
 
     title: "Vite + React",
@@ -206,13 +224,13 @@ const appContent = {
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
+      hi: "गिनती है ",
     }),
 
     edit: t<ReactNode>({
       en: (
         <>
-          <code>src/App.tsx</code> को संपादित करें और HMR का परीक्षण करने के लिए
-          सहेजें
+          Edit <code>src/App.tsx</code> and save to test HMR
         </>
       ),
       fr: (
@@ -225,12 +243,19 @@ const appContent = {
           Edita <code>src/App.tsx</code> y guarda para probar HMR
         </>
       ),
+      hi: (
+        <>
+          <code>src/App.tsx</code> को संपादित करें और HMR का परीक्षण करने के लिए
+          सहेजें
+        </>
+      ),
     }),
 
     readTheDocs: t({
       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",
+      hi: "अधिक जानने के लिए Vite और React लोगो पर क्लिक करें",
     }),
   },
 } satisfies Dictionary;
@@ -308,11 +333,13 @@ const appContent = {
       en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
+      hi: "Vite लोगो",
     }),
     reactLogo: t({
       en: "React logo",
       fr: "Logo React",
       es: "Logo React",
+      hi: "React लोगो",
     }),
 
     title: "Vite + React",
@@ -321,6 +348,7 @@ const appContent = {
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
+      hi: "काउंट है ",
     }),
 
     edit:
@@ -330,7 +358,7 @@ const appContent = {
         // यदि आप अपनी सामग्री में React node का उपयोग करते हैं तो React को import करना न भूलें
         en: (
           <>
-            Edit <code>src/App.tsx</code> और HMR परीक्षण के लिए सहेजें
+            Edit <code>src/App.tsx</code> and save to test HMR
           </>
         ),
         fr: (
@@ -340,7 +368,12 @@ const appContent = {
         ),
         es: (
           <>
-            Edita <code>src/App.tsx</code> और HMR परीक्षण के लिए सहेजें
+            Edita <code>src/App.tsx</code> y guarda para probar HMR
+          </>
+        ),
+        hi: (
+          <>
+            <code>src/App.tsx</code> संपादित करें और HMR परीक्षण के लिए सहेजें
           </>
         ),
       },
@@ -410,6 +443,9 @@ module.exports = appContent;
     "readTheDocs": {
       "nodeType": "translation",
       "translation": {
+        "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",
         "hi": "अधिक जानने के लिए Vite और React लोगो पर क्लिक करें"
       }
     }
@@ -417,11 +453,11 @@ module.exports = appContent;
 }
 ```
 
-> आपकी सामग्री घोषणाएँ आपके एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जब वे `contentDir` निर्देशिका (डिफ़ॉल्ट रूप से, `./src`) में शामिल हो जाती हैं। और सामग्री घोषणा फ़ाइल एक्सटेंशन से मेल खाती हैं (डिफ़ॉल्ट रूप से, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)।
+> आपकी सामग्री घोषणाएँ आपके एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जब वे `contentDir` निर्देशिका (डिफ़ॉल्ट रूप से, `./src`) में शामिल हो जाती हैं और सामग्री घोषणा फ़ाइल एक्सटेंशन से मेल खाती हैं (डिफ़ॉल्ट रूप से, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)।
 
-> अधिक विवरण के लिए, [सामग्री घोषणा प्रलेखन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/get_started.md) देखें।
+> अधिक विवरण के लिए, [सामग्री घोषणा प्रलेखन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें।
 
-> यदि आपकी सामग्री फ़ाइल में TSX कोड शामिल है, तो आपको अपनी सामग्री फ़ाइल में `import React from "react";` आयात करने पर विचार करना चाहिए।
+यदि आपकी सामग्री फ़ाइल में TSX कोड शामिल है, तो आपको अपनी सामग्री फ़ाइल में `import React from "react";` आयात करने पर विचार करना चाहिए।
 
 ### चरण 5: अपने कोड में Intlayer का उपयोग करें
 
@@ -639,345 +675,98 @@ const LocaleSwitcher = () => {
 - https://example.com/fr/about
 ```
 
-> डिफ़ॉल्ट रूप से, डिफ़ॉल्ट लोकल के लिए रूट्स को कोई प्रीफ़िक्स नहीं दिया जाता है। यदि आप डिफ़ॉल्ट लोकल के लिए प्रीफ़िक्स जोड़ना चाहते हैं, तो आप अपनी कॉन्फ़िगरेशन में `middleware.prefixDefault` विकल्प को `true` पर सेट कर सकते हैं। अधिक जानकारी के लिए [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
+डिफ़ॉल्ट रूप से, डिफ़ॉल्ट लोकल के लिए रूट्स को कोई प्रीफ़िक्स नहीं दिया जाता है। यदि आप डिफ़ॉल्ट लोकल के लिए प्रीफ़िक्स जोड़ना चाहते हैं, तो आप अपनी कॉन्फ़िगरेशन में `middleware.prefixDefault` विकल्प को `true` पर सेट कर सकते हैं। अधिक जानकारी के लिए [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
 
 अपने एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ने के लिए, आप एक `LocaleRouter` कॉम्पोनेंट बना सकते हैं जो आपके एप्लिकेशन के रूट्स को लपेटता है और लोकल-आधारित रूटिंग को संभालता है। यहाँ [React Router](https://reactrouter.com/home) का उपयोग करते हुए एक उदाहरण दिया गया है:
 
 ```tsx fileName="src/components/LocaleRouter.tsx"  codeFormat="typescript"
-// आवश्यक निर्भरताओं और फ़ंक्शंस को इम्पोर्ट करना
-import { type Locales, configuration, getPathWithoutLocale } from "intlayer"; // 'intlayer' से उपयोगिता फ़ंक्शन और प्रकार
+import { localeMap } from "intlayer"; // 'intlayer' से उपयोगिता फ़ंक्शन और प्रकार
 import type { FC, PropsWithChildren } from "react"; // कार्यात्मक घटकों और प्रॉप्स के लिए React प्रकार
 import { IntlayerProvider } from "react-intlayer"; // अंतरराष्ट्रीयकरण संदर्भ के लिए प्रदाता
-import {
-  BrowserRouter,
-  Routes,
-  Route,
-  Navigate,
-  useLocation,
-} from "react-router-dom"; // नेविगेशन प्रबंधन के लिए राउटर घटक
-
-// Intlayer से कॉन्फ़िगरेशन को डीस्ट्रक्चर करना
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
+import { BrowserRouter, Route, Routes } from "react-router-dom"; // नेविगेशन प्रबंधन के लिए राउटर घटक
 
 /**
- * एक घटक जो स्थानीयकरण को संभालता है और बच्चों को उपयुक्त लोकल संदर्भ के साथ लपेटता है।
- * यह URL-आधारित लोकल पहचान और सत्यापन का प्रबंधन करता है।
- */
-const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
-  children,
-  locale,
-}) => {
-  const { pathname, search } = useLocation(); // वर्तमान URL पथ प्राप्त करें
-
-  // वर्तमान लोकल निर्धारित करें, यदि प्रदान नहीं किया गया है तो डिफ़ॉल्ट पर वापस जाएं
-  const currentLocale = locale ?? defaultLocale;
-
-  // पथ से लोकल उपसर्ग हटाएं ताकि एक बेस पथ बनाया जा सके
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // वर्तमान URL पथ
-  );
-
-  /**
-   * यदि middleware.prefixDefault सत्य है, तो डिफ़ॉल्ट लोकल हमेशा उपसर्गित होना चाहिए।
-   */
-  if (middleware.prefixDefault) {
-    // लोकल को मान्य करें
-    if (!locale || !locales.includes(locale)) {
-      // अपडेट किए गए पथ के साथ डिफ़ॉल्ट लोकल पर पुनर्निर्देशित करें
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // वर्तमान इतिहास प्रविष्टि को नए से बदलें
-        />
-      );
-    }
-
-    // बच्चों को IntlayerProvider के साथ लपेटें और वर्तमान लोकल सेट करें
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * जब middleware.prefixDefault गलत होता है, तो डिफ़ॉल्ट लोकल उपसर्गित नहीं होता है।
-     * सुनिश्चित करें कि वर्तमान लोकल मान्य है और डिफ़ॉल्ट लोकल नहीं है।
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (locale) => locale.toString() !== defaultLocale.toString() // डिफ़ॉल्ट लोकल को बाहर करें
-        )
-        .includes(currentLocale) // जांचें कि वर्तमान लोकल मान्य लोकलों की सूची में है या नहीं
-    ) {
-      // लोकल उपसर्ग के बिना पथ पर पुनर्निर्देशित करें
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // बच्चों को IntlayerProvider के साथ लपेटें और वर्तमान लोकल सेट करें
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-/**
- * एक राउटर घटक जो लोकल-विशिष्ट मार्ग सेट करता है।
+ * एक राउटर घटक जो स्थानीय-विशिष्ट मार्ग सेट करता है।
  * यह React Router का उपयोग नेविगेशन प्रबंधित करने और स्थानीयकृत घटकों को रेंडर करने के लिए करता है।
  */
 export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
   <BrowserRouter>
     <Routes>
-      {locales
-        .filter(
-          (locale) => middleware.prefixDefault || locale !== defaultLocale
-        )
-        .map((locale) => (
-          <Route
-            // लोकल को कैप्चर करने के लिए रूट पैटर्न (जैसे, /en/, /fr/) और सभी बाद के पथों से मेल खाता है
-            path={`/${locale}/*`}
-            key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // बच्चों को लोकल प्रबंधन के साथ लपेटता है
-          />
-        ))}
-
-      {
-        // यदि डिफ़ॉल्ट लोकल का उपसर्ग निष्क्रिय है, तो बच्चों को सीधे रूट पथ पर रेंडर करें
-        !middleware.prefixDefault && (
-          <Route
-            path="*"
-            element={
-              <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // बच्चों को लोकल प्रबंधन के साथ लपेटता है
-          />
-        )
-      }
+      {localeMap(({ locale, urlPrefix }) => (
+        <Route
+          // लोकल को पकड़ने के लिए रूट पैटर्न (उदाहरण: /en/, /fr/) और सभी बाद के पथों से मेल खाना
+          path={`${urlPrefix}/*`}
+          key={locale}
+          element={
+            <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+          } // लोकल प्रबंधन के साथ बच्चों को लपेटें
+        />
+      ))}
     </Routes>
   </BrowserRouter>
 );
 ```
 
 ```jsx fileName="src/components/LocaleRouter.mjx" codeFormat="esm"
-// आवश्यक निर्भरताओं और फ़ंक्शंस को आयात करना
-import { configuration, getPathWithoutLocale } from "intlayer"; // 'intlayer' से उपयोगिता फ़ंक्शंस और प्रकार
-// 'intlayer' से उपयोगिता फ़ंक्शंस और प्रकार
-import { IntlayerProvider } from "react-intlayer"; // अंतर्राष्ट्रीयकरण संदर्भ के लिए प्रदाता
-import {
-  BrowserRouter,
-  Routes,
-  Route,
-  Navigate,
-  useLocation,
-} from "react-router-dom"; // नेविगेशन प्रबंधन के लिए राउटर घटक
-
-// Intlayer से विन्यास को डीस्ट्रक्चर करना
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-/**
- * एक घटक जो स्थानीयकरण को संभालता है और बच्चों को उपयुक्त लोकल संदर्भ के साथ लपेटता है।
- * यह URL-आधारित स्थानीयकरण पहचान और सत्यापन को प्रबंधित करता है।
- */
-const AppLocalized = ({ children, locale }) => {
-  const { pathname, search } = useLocation(); // वर्तमान URL पथ प्राप्त करें
-
-  // वर्तमान स्थानीयकरण निर्धारित करें, यदि प्रदान नहीं किया गया है तो डिफ़ॉल्ट पर वापस जाएं
-  const currentLocale = locale ?? defaultLocale;
-
-  // पथ से स्थानीयकरण उपसर्ग हटाएं ताकि एक मूल पथ बनाया जा सके
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // वर्तमान URL पथ
-  );
-
-  /**
-   * यदि middleware.prefixDefault सत्य है, तो डिफ़ॉल्ट स्थानीयकरण हमेशा उपसर्गित होना चाहिए।
-   */
-  if (middleware.prefixDefault) {
-    // स्थानीयकरण को सत्यापित करें
-    if (!locale || !locales.includes(locale)) {
-      // अद्यतन पथ के साथ डिफ़ॉल्ट स्थानीयकरण पर पुनर्निर्देशित करें
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // वर्तमान इतिहास प्रविष्टि को नए से बदलें
-        />
-      );
-    }
-
-    // बच्चों को IntlayerProvider के साथ लपेटें और वर्तमान स्थानीयकरण सेट करें
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * जब middleware.prefixDefault गलत होता है, तो डिफ़ॉल्ट स्थानीयकरण उपसर्गित नहीं होता है।
-     * सुनिश्चित करें कि वर्तमान स्थानीयकरण मान्य है और डिफ़ॉल्ट स्थानीयकरण नहीं है।
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (locale) => locale.toString() !== defaultLocale.toString() // डिफ़ॉल्ट स्थानीयकरण को बाहर करें
-        )
-        .includes(currentLocale) // जांचें कि वर्तमान स्थानीयकरण मान्य स्थानीयकरणों की सूची में है या नहीं
-    ) {
-      // स्थानीयकरण उपसर्ग के बिना पथ पर पुनर्निर्देशित करें
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // बच्चों को IntlayerProvider के साथ लपेटें और वर्तमान स्थानीयकरण सेट करें
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
+import { localeMap } from 'intlayer'; // 'intlayer' से उपयोगिता फ़ंक्शंस और प्रकार
+import type { FC, PropsWithChildren } from 'react'; // फ़ंक्शनल कंपोनेंट्स और प्रॉप्स के लिए React प्रकार
+import { IntlayerProvider } from 'react-intlayer'; // अंतर्राष्ट्रीयकरण संदर्भ के लिए प्रदाता
+import { BrowserRouter, Route, Routes } from 'react-router-dom'; // नेविगेशन प्रबंधन के लिए राउटर घटक
 
 /**
  * एक राउटर घटक जो स्थानीयकरण-विशिष्ट मार्ग सेट करता है।
  * यह React Router का उपयोग नेविगेशन प्रबंधित करने और स्थानीयकृत घटकों को रेंडर करने के लिए करता है।
  */
-export const LocaleRouter = ({ children }) => (
+export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
   <BrowserRouter>
     <Routes>
-      {locales
-        .filter(
-          (locale) => middleware.prefixDefault || locale !== defaultLocale
-        )
-        .map((locale) => (
-          <Route
-            // स्थानीयकरण को पकड़ने के लिए रूट पैटर्न (जैसे, /en/, /fr/) और सभी बाद के पथों से मेल खाता है
-            path={`/${locale}/*`}
-            key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // बच्चों को स्थानीयकरण प्रबंधन के साथ लपेटता है
-          />
-        ))}
-
-      {
-        // यदि डिफ़ॉल्ट स्थानीयकरण के लिए उपसर्ग अक्षम है, तो बच्चों को सीधे रूट पथ पर रेंडर करें
-        !middleware.prefixDefault && (
-          <Route
-            path="*"
-            element={
-              <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // बच्चों को स्थानीयकरण प्रबंधन के साथ लपेटता है
-          />
-        )
-      }
+      {localeMap(({ locale, urlPrefix }) => (
+        <Route
+          // स्थानीयकरण को पकड़ने के लिए रूट पैटर्न (जैसे, /en/, /fr/) और सभी बाद के पथों से मेल खाता है
+          path={`${urlPrefix}/*`}
+          key={locale}
+          element={
+            <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+          } // बच्चों को स्थानीयकरण प्रबंधन के साथ लपेटता है
+        />
+      ))}
     </Routes>
   </BrowserRouter>
 );
 ```
 
 ```jsx fileName="src/components/LocaleRouter.cjx" codeFormat="commonjs"
-// आवश्यक निर्भरताओं और फ़ंक्शंस को आयात करना
-const { configuration, getPathWithoutLocale } = require("intlayer"); // 'intlayer' से उपयोगिता फ़ंक्शंस और प्रकार
-const { IntlayerProvider, useLocale } = require("react-intlayer"); // अंतरराष्ट्रीयकरण संदर्भ के लिए प्रदाता
-const {
-  BrowserRouter,
-  Routes,
-  Route,
-  Navigate,
-  useLocation,
-} = require("react-router-dom"); // नेविगेशन प्रबंधन के लिए राउटर घटक
-
-// Intlayer से विन्यास को डीस्ट्रक्चर करना
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-/**
- * एक घटक जो स्थानीयकरण को संभालता है और बच्चों को उपयुक्त स्थानीय संदर्भ के साथ लपेटता है।
- * यह URL-आधारित स्थानीय पहचान और सत्यापन का प्रबंधन करता है।
- */
-const AppLocalized = ({ children, locale }) => {
-  const { pathname, search } = useLocation(); // वर्तमान URL पथ प्राप्त करें
-
-  // वर्तमान लोकल निर्धारित करें, यदि प्रदान नहीं किया गया है तो डिफ़ॉल्ट पर वापस जाएं
-  const currentLocale = locale ?? defaultLocale;
-
-  // पथ से लोकल उपसर्ग हटाएं ताकि एक आधार पथ बनाया जा सके
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // वर्तमान URL पथ
-  );
-
-  /**
-   * यदि middleware.prefixDefault सत्य है, तो डिफ़ॉल्ट लोकल हमेशा उपसर्गित होना चाहिए।
-   */
-  if (middleware.prefixDefault) {
-    // लोकल को मान्य करें
-    if (!locale || !locales.includes(locale)) {
-      // अपडेट किए गए पथ के साथ डिफ़ॉल्ट लोकल पर पुनर्निर्देशित करें
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // वर्तमान इतिहास प्रविष्टि को नए से बदलें
-        />
-      );
-    }
-
-    // बच्चों को IntlayerProvider के साथ लपेटें और वर्तमान लोकल सेट करें
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * जब middleware.prefixDefault गलत होता है, तो डिफ़ॉल्ट लोकल उपसर्गित नहीं होता है।
-     * सुनिश्चित करें कि वर्तमान लोकल मान्य है और डिफ़ॉल्ट लोकल नहीं है।
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (locale) => locale.toString() !== defaultLocale.toString() // डिफ़ॉल्ट लोकल को बाहर करें
-        )
-        .includes(currentLocale) // जांचें कि वर्तमान लोकल मान्य लोकलों की सूची में है या नहीं
-    ) {
-      // लोकल उपसर्ग के बिना पथ पर पुनर्निर्देशित करें
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // बच्चों को IntlayerProvider के साथ लपेटें और वर्तमान लोकल सेट करें
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
+const { localeMap } = require("intlayer"); // 'intlayer' से उपयोगिता फ़ंक्शंस और प्रकार
+const React = require("react"); // React को आयात करें
+const { IntlayerProvider } = require("react-intlayer"); // अंतरराष्ट्रीयकरण संदर्भ के लिए प्रदाता
+const { BrowserRouter, Route, Routes } = require("react-router-dom"); // नेविगेशन प्रबंधन के लिए राउटर घटक
 
 /**
  * एक राउटर कॉम्पोनेंट जो लोकल-विशिष्ट रूट सेट करता है।
  * यह नेविगेशन प्रबंधित करने और स्थानीयकृत कॉम्पोनेंट्स को रेंडर करने के लिए React Router का उपयोग करता है।
  */
-const LocaleRouter = ({ children }) => (
-  <BrowserRouter>
-    <Routes>
-      {locales
-        .filter(
-          (locale) => middleware.prefixDefault || locale !== defaultLocale
-        )
-        .map((locale) => (
-          <Route
-            // लोकल को कैप्चर करने के लिए रूट पैटर्न (जैसे, /en/, /fr/) और सभी बाद के पथों से मेल खाता है
-            path={`/${locale}/*`}
-            key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // बच्चों को लोकल प्रबंधन के साथ लपेटता है
-          />
-        ))}
+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),
+        })
+      )
+    )
+  );
 
-      {
-        // यदि डिफ़ॉल्ट लोकल के लिए उपसर्ग अक्षम है, तो बच्चों को सीधे रूट पथ पर रेंडर करें
-        !middleware.prefixDefault && (
-          <Route
-            path="*"
-            element={
-              <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // बच्चों को लोकल प्रबंधन के साथ लपेटता है
-          />
-        )
-      }
-    </Routes>
-  </BrowserRouter>
-);
+exports.LocaleRouter = LocaleRouter;
 ```
 
+> नोट: यदि आप `routing.mode: 'no-prefix' | 'search-params'` का उपयोग करते हैं, तो आपको शायद `localeMap` फ़ंक्शन का उपयोग करने की आवश्यकता नहीं है।
+
 फिर, आप अपने एप्लिकेशन में `LocaleRouter` कॉम्पोनेंट का उपयोग कर सकते हैं:
 
 ```tsx fileName="src/App.tsx" codeFormat="typescript"
@@ -1019,6 +808,8 @@ const App = () => (
 
 साथ ही, आप अपने एप्लिकेशन में सर्वर-साइड रूटिंग जोड़ने के लिए `intlayerProxy` का भी उपयोग कर सकते हैं। यह प्लगइन URL के आधार पर वर्तमान लोकल का स्वचालित रूप से पता लगाएगा और उपयुक्त लोकल कुकी सेट करेगा। यदि कोई लोकल निर्दिष्ट नहीं है, तो प्लगइन उपयोगकर्ता के ब्राउज़र भाषा प्राथमिकताओं के आधार पर सबसे उपयुक्त लोकल निर्धारित करेगा। यदि कोई लोकल पता नहीं चलता है, तो यह डिफ़ॉल्ट लोकल पर पुनर्निर्देशित करेगा।
 
+> ध्यान दें कि production में `intlayerProxy` का उपयोग करने के लिए, आपको `vite-intlayer` पैकेज को `devDependencies` से `dependencies` में स्विच करना होगा।
+
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
@@ -1426,13 +1217,13 @@ module.exports = App;
 
 इन परिवर्तनों को लागू करने से, आपका एप्लिकेशन:
 
-- सुनिश्चित करेगा कि **भाषा** (`lang`) एट्रिब्यूट वर्तमान लोकल को सही ढंग से दर्शाए, जो SEO और ब्राउज़र व्यवहार के लिए महत्वपूर्ण है।
-- लोकल के अनुसार **टेक्स्ट दिशा** (`dir`) को समायोजित करेगा, जिससे विभिन्न पढ़ने के क्रम वाली भाषाओं के लिए पठनीयता और उपयोगिता बढ़ेगी।
-- एक अधिक **सुलभ** अनुभव प्रदान करेगा, क्योंकि सहायक तकनीकें इन एट्रिब्यूट्स पर निर्भर करती हैं ताकि वे बेहतर तरीके से काम कर सकें।
+- सुनिश्चित करें कि **भाषा** (`lang`) एट्रिब्यूट वर्तमान लोकल को सही ढंग से दर्शाए, जो SEO और ब्राउज़र व्यवहार के लिए महत्वपूर्ण है।
+- लोकल के अनुसार **टेक्स्ट दिशा** (`dir`) को समायोजित करें, जिससे विभिन्न पढ़ने के क्रम वाली भाषाओं के लिए पठनीयता और उपयोगिता बढ़े।
+- एक अधिक **सुलभ** अनुभव प्रदान करें, क्योंकि सहायक तकनीकें इन एट्रिब्यूट्स पर निर्भर करती हैं ताकि वे बेहतर तरीके से काम कर सकें।
 
 ### (वैकल्पिक) चरण 10: एक स्थानीयकृत लिंक कंपोनेंट बनाना
 
-यह सुनिश्चित करने के लिए कि आपके एप्लिकेशन की नेविगेशन वर्तमान लोकल का सम्मान करती है, आप एक कस्टम `Link` कंपोनेंट बना सकते हैं। यह कंपोनेंट स्वचालित रूप से आंतरिक URL को वर्तमान भाषा के साथ प्रीफिक्स करता है। उदाहरण के लिए, जब एक फ्रेंच-भाषी उपयोगकर्ता "About" पेज के लिंक पर क्लिक करता है, तो उसे `/fr/about` पर पुनः निर्देशित किया जाता है, न कि `/about` पर।
+यह सुनिश्चित करने के लिए कि आपके एप्लिकेशन की नेविगेशन वर्तमान लोकल का सम्मान करती है, आप एक कस्टम `Link` कंपोनेंट बना सकते हैं। यह कंपोनेंट स्वचालित रूप से आंतरिक URL को वर्तमान भाषा के साथ प्रीफिक्स करता है, ताकि उदाहरण के लिए, जब एक फ्रेंच-भाषी उपयोगकर्ता "About" पेज के लिंक पर क्लिक करता है, तो उसे `/fr/about` पर पुनः निर्देशित किया जाता है, न कि `/about` पर।
 
 यह व्यवहार कई कारणों से उपयोगी है:
 
@@ -1451,11 +1242,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
+> {}
 
 /**
  * यह उपयोगिता फ़ंक्शन जांचता है कि दिया गया URL बाहरी है या नहीं।
@@ -1480,7 +1270,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
 
     return (
       <a href={hrefI18n} ref={ref} {...props}>
-        /{children}
+        {children}
       </a>
     );
   }
@@ -1506,7 +1296,6 @@ export const checkIsExternalLink = (href?: string): boolean =>
  * आंतरिक लिंक के लिए, यह `getLocalizedUrl` का उपयोग करता है ताकि URL के आगे लोकल जोड़ा जा सके (जैसे, /fr/about)।
  * यह सुनिश्चित करता है कि नेविगेशन उसी लोकल संदर्भ के भीतर बना रहे।
  */
-/
 export const Link = forwardRef(({ href, children, ...props }, ref) => {
   const { locale } = useLocale();
   const isExternalLink = checkIsExternalLink(href);
@@ -1605,8 +1394,8 @@ Intlayer TypeScript के लाभ प्राप्त करने और
 
 इसके लिए, आप अपनी `.gitignore` फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
 
-```plaintext
-# Intlayer के साथ अपना Vite and React अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
+```plaintext fileName=".gitignore"
+# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
 .intlayer
 ```
 
@@ -1630,5 +1419,3 @@ Intlayer के साथ अपने विकास अनुभव को
 ### आगे बढ़ें
 
 आगे बढ़ने के लिए, आप [विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) को लागू कर सकते हैं या अपनी सामग्री को [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) का उपयोग करके बाहरी रूप से प्रबंधित कर सकते हैं।
-
----