प्रारंभ करना अंतरराष्ट्रीयकरण (i18n) Intlayer और React Create App के साथ

import { t, type DeclarationContent } from "intlayer";import React, { type ReactNode } from "react";const appContent = {  key: "app",  content: {    getStarted: t<ReactNode>({      en: (        <>          Edit <code>src/App.tsx</code> and save to reload        </>      ),      fr: (        <>          Éditez <code>src/App.tsx</code> et enregistrez pour recharger        </>      ),      es: (        <>          Edita <code>src/App.tsx</code> y guarda para recargar        </>      ),    }),    reactLink: {      href: "https://reactjs.org",      content: t({        en: "Learn React",        fr: "Apprendre React",        es: "Aprender React",      }),    },  },} satisfies DeclarationContent;export default appContent;

import logo from "./logo.svg";import "./App.css";import type { FC } from "react";import { IntlayerProvider, useIntlayer } from "react-intlayer";const AppContent: FC = () => {  const content = useIntlayer("app");  return (    <div className="App">      <img src={logo} className="App-logo" alt="logo" />      {content.getStarted}      <a        className="App-link"        href={content.reactLink.href.value}        target="_blank"        rel="noopener noreferrer"      >        {content.reactLink.content}      </a>    </div>  );};const App: FC = () => (  <IntlayerProvider>    <AppContent />  </IntlayerProvider>);export default App;

import { Locales } from "intlayer";import { useLocale } from "react-intlayer";const LocaleSwitcher = () => {  const { setLocale } = useLocale();  return (    <button onClick={() => setLocale(Locales.English)}>      Change Language to English    </button>  );};

// आवश्यक निर्भरताएँ और फ़ंक्शन आयात करनाimport { Locales, getConfiguration, getPathWithoutLocale } from "intlayer"; // 'intlayer' से उपयोगिता फ़ंक्शन और प्रकारimport type { FC, PropsWithChildren } from "react"; // कार्यात्मक घटक और गुणों के लिए React प्रकारimport { IntlayerProvider } from "react-intlayer"; // अंतरराष्ट्रीयकरण संदर्भ के लिए प्रदाताimport {  BrowserRouter,  Routes,  Route,  useParams,  Navigate,  useLocation,} from "react-router-dom"; // नेविगेशन प्रबंधन के लिए राउटर घटक// Intlayer से कॉन्फ़िगरेशन का विघटन करनाconst { internationalization, middleware } = getConfiguration();const { locales, defaultLocale } = internationalization;/** * एक घटक जो स्थानीयकरण को संभालता है और बच्चों को उचित स्थानीय सामग्री के साथ लपेटता है। * यह URL-आधारित स्थानीयकरण पहचान और मान्यता का प्रबंधन करता है। */const AppLocalized: FC<PropsWithChildren> = ({ children }) => {  const path = useLocation().pathname; // वर्तमान URL पथ प्राप्त करें  const { locale } = useParams<{ locale: Locales }>(); // URL से स्थानीयता पैरा को निचोड़ें  // वर्तमान स्थानीयता निर्धारित करें, यदि प्रदान नहीं किया गया है तो डिफ़ॉल्ट पर लौटें  const currentLocale = locale ?? defaultLocale;  // आधार पथ बनाने के लिए पथ से स्थानीयता पूर्ववर्ती को हटाएँ  const pathWithoutLocale = getPathWithoutLocale(    path // वर्तमान URL पथ  );  /**   * यदि middleware.prefixDefault true है, तो डिफ़ॉल्ट स्थानीयता हमेशा पूर्ववर्ती होनी चाहिए।   */  if (middleware.prefixDefault) {    // स्थानीयता मान्य करें    if (!locale || !locales.includes(locale)) {      // अद्यतन पथ के साथ डिफ़ॉल्ट स्थानीयता पर पुनर्निदेशित करें      return (        <Navigate          to={`/${defaultLocale}/${pathWithoutLocale}`}          replace // नए एक के साथ वर्तमान इतिहास प्रविष्टि को बदलें        />      );    }    // IntlayerProvider के साथ बच्चों को लपेटें और वर्तमान स्थानीयता सेट करें    return (      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>    );  } else {    /**     * जब middleware.prefixDefault false है, तो डिफ़ॉल्ट स्थानीयता पूर्ववर्ती नहीं होती।     * सुनिश्चित करें कि वर्तमान स्थानीयता मान्य है और डिफ़ॉल्ट स्थानीयता नहीं है।     */    if (      currentLocale.toString() !== defaultLocale.toString() &&      !locales        .filter(          (locale) => locale.toString() !== defaultLocale.toString() // डिफ़ॉल्ट स्थानीयता को छोड़ दें        )        .includes(currentLocale) // सुनिश्चित करें कि वर्तमान स्थानीयता मान्य स्थानीयताओं की सूची में है    ) {      // पूर्ववर्ती के बिना पथ पर पुनर्निदेशित करें      return <Navigate to={pathWithoutLocale} replace />;    }    // IntlayerProvider के साथ बच्चों को लपेटें और वर्तमान स्थानीयता सेट करें    return (      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>    );  }};/** * एक राउटर घटक जो स्थानीय-विशिष्ट मार्गों को सेट करता है। * यह नेविगेशन को प्रबंधित करने और स्थानीयकृत घटकों को प्रस्तुत करने के लिए React Router का उपयोग करता है। */export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (  <BrowserRouter>    <Routes>      <Route        // मार्ग पैटर्न जो स्थानीयता को कैप्चर करता है (जैसे, /en/, /fr/) और सभी अगले पथों से मेल खाता है        path="/:locale/*"        element={<AppLocalized>{children}</AppLocalized>} // स्थानीय प्रबंधन के साथ बच्चों को लपेटता है      />      {        // यदि डिफ़ॉल्ट स्थानीयता को पूर्ववर्ती बनाना बंद कर दिया गया है, तो रूट पथ पर सीधे बच्चों को प्रस्तुत करें        !middleware.prefixDefault && (          <Route            path="*"            element={<AppLocalized>{children}</AppLocalized>} // स्थानीय प्रबंधन के साथ बच्चों को लपेटता है          />        )      }    </Routes>  </BrowserRouter>);

import { useLocation, useNavigate } from "react-router-dom";import {  Locales,  getHTMLTextDir,  getLocaleName,  getLocalizedUrl,} from "intlayer";import { useLocale } from "react-intlayer";import { type FC } from "react";const LocaleSwitcher: FC = () => {  const location = useLocation(); // वर्तमान URL पथ प्राप्त करें। उदाहरण: /fr/about  const navigate = useNavigate();  const changeUrl = (locale: Locales) => {    // अद्यतन स्थानीयता के साथ URL का निर्माण करें    // उदाहरण: /es/about जब स्थानीयता स्पेनिश पर सेट हो    const pathWithLocale = getLocalizedUrl(location.pathname, locale);    // URL पथ को अपडेट करें    navigate(pathWithLocale);  };  const { locale, availableLocales, setLocale } = useLocale({    onLocaleChange: changeUrl,  });  return (    <ol>      {availableLocales.map((localeItem) => (        <li key={localeItem}>          <a            href={getLocalizedUrl(location.pathname, localeItem)}            hrefLang={localeItem}            aria-current={locale === localeItem ? "page" : undefined}            onClick={(e) => {              e.preventDefault();              setLocale(localeItem);            }}          >            <span>              {/* इसकी अपनी स्थानीयता में भाषा - जैसे फ्रेंच */}              {getLocaleName(localeItem, locale)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* वर्तमान स्थानीयता में भाषा - जैसे फ्रेंच जब वर्तमान स्थानीयता Locales.SPANISH पर सेट हो */}              {getLocaleName(localeItem)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* अंग्रेजी में भाषा - जैसे फ्रेंच */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>            <span>              {/* इसकी अपनी स्थानीयता में भाषा - जैसे FR */}              {localeItem}            </span>          </a>        </li>      ))}    </ol>  );};