@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/hi/intlayer_with_create_react_app.md

@@ -25,19 +25,70 @@ author: aymericzip
 
 # Intlayer के साथ अपना Create React App अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
 
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-react-cra-template?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 - Intlayer का उपयोग करके अपने एप्लिकेशन को अंतर्राष्ट्रीयकृत कैसे करें"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 [एप्लेट टेम्पलेट](https://github.com/aymericzip/intlayer-react-cra-template) को जाँचें.
 
 ## इंटलेयर क्या है?
 
+`react-i18next` या `i18next` जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो निम्नलिखित जैसे एकीकृत अनुकूलन के साथ आता है:
+
+<AccordionGroup>
+
+<Accordion header="React की पूरी कवरेज">
+
 **इंटलेयर** एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब एप्लिकेशन में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
 
+</Accordion>
+
+<Accordion header="Bundle size">
+
+अपने पेजों में विशाल JSON फ़ाइलों को लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। Intlayer आपके **bundle और page sizes को 50% तक कम करने में मदद करता है**।
+
+</Accordion>
+
+<Accordion header="रखरखाव">
+
+अपने एप्लिकेशन की content को scope करना **बड़े पैमाने पर एप्लिकेशन के लिए रखरखाव को सुविधाजनक बनाता है**। आप अपने पूरे content codebase की समीक्षा करने के मानसिक भार के बिना एक एकल feature folder को duplicate या delete कर सकते हैं। इसके अलावा, Intlayer **पूरी तरह से typed** है ताकि आपकी content की सटीकता सुनिश्चित की जा सके।
+
+</Accordion>
+
+<Accordion header="AI Agent">
+
+कंटेंट को एक साथ रखने से Large Language Models (LLMs) को आवश्यक context **कम हो जाता है**। Intlayer के साथ एक suite of tools भी आता है, जैसे **CLI** missing translations को test करने के लिए, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/mcp_server.md)**, और **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/agent_skills.md)**, ताकि AI agents के लिए developer experience (DX) को और भी smooth बनाया जा सके।
+
+</Accordion>
+
+<Accordion header="Automation">
+
+अपनी CI/CD पाइपलाइन में अपनी पसंद के LLM का उपयोग करके अपने AI प्रदाता की लागत पर अनुवाद को स्वचालित करें। Intlayer एक **compiler** भी प्रदान करता है जो सामग्री निष्कर्षण को स्वचालित करता है, साथ ही एक [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) जो **पृष्ठभूमि में अनुवाद** करने में सहायता करता है।
+
+</Accordion>
+
 इंटलेयर के साथ, आप कर सकते हैं:
 
+बड़ी JSON फ़ाइलों को components से जोड़ने से performance और reactivity की समस्याएं हो सकती हैं। Intlayer आपकी content loading को build time पर optimize करता है।
+
+</Accordion>
+
+<Accordion header="गैर-विकास के साथ स्केलिंग">
+
 - **आसानी से अनुवाद प्रबंधित करें** घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके।
 - **मेटाडेटा, रूट्स और सामग्री को गतिशील रूप से स्थानीयकृत करें**।
 - **टाइपस्क्रिप्ट समर्थन सुनिश्चित करें** स्वचालित रूप से उत्पन्न प्रकारों के साथ, जो ऑटोकम्प्लीशन और त्रुटि पहचान में सुधार करता है।
 - **उन्नत सुविधाओं का लाभ उठाएं**, जैसे गतिशील लोकेल पहचान और स्विचिंग।
 
+</Accordion>
+</AccordionGroup>
+
+---
+
 ## रिएक्ट एप्लिकेशन में इंटलेयर सेट अप करने के लिए चरण-दर-चरण गाइड
 
 <Steps>
@@ -284,424 +335,6 @@ const LocaleSwitcher = () => {
 
 अपने एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ने के लिए, आप एक `LocaleRouter` कंपोनेंट बना सकते हैं जो आपके एप्लिकेशन के रूट्स को रैप करता है और लोकेल-आधारित रूटिंग को संभालता है। यहां [React Router](https://reactrouter.com/home) का उपयोग करते हुए एक उदाहरण है:
 
-```tsx fileName="src/components/LocaleRouter.tsx"  codeFormat="typescript"
-// आवश्यक डिपेंडेंसी और फ़ंक्शन आयात करें
-import { type Locales, configuration, getPathWithoutLocale } 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;
-
-/**
- * एक कंपोनेंट जो स्थानीयकरण को संभालता है और बच्चों को उपयुक्त लोकेल संदर्भ के साथ रैप करता है।
- * यह 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>
-            } // बच्चों को लोकेल प्रबंधन के साथ रैप करता है
-          />
-        )
-      }
-    </Routes>
-  </BrowserRouter>
-);
-
-// 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>
-    );
-  }
-};
-
-/**
- * एक राउटर घटक जो स्थानीय-विशिष्ट मार्ग सेट करता है।
- * यह नेविगेशन प्रबंधन और स्थानीयकृत घटकों को प्रस्तुत करने के लिए React Router का उपयोग करता है।
- */
-export 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>} // बच्चों को स्थानीय प्रबंधन के साथ लपेटता है
-          />
-        ))}
-
-      {
-        // यदि डिफ़ॉल्ट स्थानीय को उपसर्गित करना अक्षम है, तो बच्चों को सीधे रूट पथ पर प्रस्तुत करें
-        !middleware.prefixDefault && (
-          <Route
-            path="*"
-            element={
-              <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // बच्चों को स्थानीय प्रबंधन के साथ लपेटता है
-          />
-        )
-      }
-    </Routes>
-  </BrowserRouter>
-);
-```
-
-```jsx fileName="src/components/LocaleRouter.mjx" codeFormat='esm'
-// आवश्यक डिपेंडेंसी और फ़ंक्शन आयात करें
-import { configuration, getPathWithoutLocale } from "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>
-    );
-  }
-};
-
-/**
- * एक राउटर कंपोनेंट जो लोकेल-विशिष्ट रूट्स सेट करता है।
- * यह नेविगेशन प्रबंधन और स्थानीयकृत कंपोनेंट्स को रेंडर करने के लिए React Router का उपयोग करता है।
- */
-export 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>} // बच्चों को लोकेल प्रबंधन के साथ रैप करता है
-          />
-        ))}
-
-      {
-        // यदि डिफ़ॉल्ट लोकेल को प्रीफिक्स करना अक्षम है, तो बच्चों को सीधे रूट पथ पर रेंडर करें
-        !middleware.prefixDefault && (
-          <Route
-            path="*"
-            element={
-              <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // बच्चों को लोकेल प्रबंधन के साथ रैप करता है
-          />
-        )
-      }
-    </Routes>
-  </BrowserRouter>
-);
-
-// 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>
-    );
-  }
-};
-
-/**
- * एक राउटर घटक जो स्थानीय-विशिष्ट मार्ग सेट करता है।
- * यह नेविगेशन प्रबंधन और स्थानीयकृत घटकों को प्रस्तुत करने के लिए React Router का उपयोग करता है।
- */
-export 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>} // बच्चों को स्थानीय प्रबंधन के साथ लपेटता है
-          />
-        ))}
-
-      {
-        // यदि डिफ़ॉल्ट स्थानीय को उपसर्गित करना अक्षम है, तो बच्चों को सीधे रूट पथ पर प्रस्तुत करें
-        !middleware.prefixDefault && (
-          <Route
-            path="*"
-            element={
-              <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // बच्चों को स्थानीय प्रबंधन के साथ लपेटता है
-          />
-        )
-      }
-    </Routes>
-  </BrowserRouter>
-);
-```
-
 ```jsx fileName="src/components/LocaleRouter.cjx" codeFormat="commonjs"
 // आवश्यक निर्भरताओं और कार्यों को आयात करना
 const { configuration, getPathWithoutLocale } = require("intlayer"); // 'intlayer' से यूटिलिटी फ़ंक्शन और प्रकार
@@ -831,6 +464,8 @@ const App: FC = () => (
 
 <Step number={8} title="जब स्थानीय बदलता है तो URL बदलें" isOptional={true}>
 
+लोकेल परिवर्तन के समय URL को बदलने के लिए, आप `useLocale` hook द्वारा प्रदान किए गए `onLocaleChange` prop का उपयोग कर सकते हैं। समानांतर में, आप `react-router-dom` से `useLocation` और `useNavigate` hooks का उपयोग करके URL पाथ को अपडेट कर सकते हैं।
+
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat={["typescript", "esm"]}
 import { useLocation, useNavigate } from "react-router-dom";
 import {