Dịch trang web React Router v7 của bạn bằng Intlayer | Quốc tế hóa (i18n)

Hướng dẫn này trình bày cách tích hợp Intlayer để thực hiện quốc tế hóa liền mạch trong các dự án React Router v7 với định tuyến nhận biết locale, hỗ trợ TypeScript và các thực hành phát triển hiện đại.

Nó bao gồm cả định tuyến dựa trên cấu hình (routes.ts) và định tuyến dựa trên hệ thống tệp (@react-router/fs-routes).

Mục lục

Tại sao nên chọn Intlayer thay vì các giải pháp thay thế?

So với các giải pháp chính như react-i18next hay i18next, Intlayer là giải pháp đi kèm với các tính năng tối ưu hóa tích hợp như:

Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng React Router v7

VideoMã nguồn (dựa trên cấu hình)Mã nguồn (định tuyến dựa trên hệ thống tệp)Bản demo (dựa trên cấu hình)

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

intlayer-react-router-v7.vercel.app

Open embedded page in fullscreen

Xem Template định tuyến dựa trên cấu hình hoặc Template các tuyến đường dựa trên hệ thống tệp trên GitHub.

1. 1

   Cài đặt các phụ thuộc

   Cài đặt các gói cần thiết bằng trình quản lý gói bạn ưa thích:

   bash

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   npx intlayer init --interactive
   

   cờ --interactive là tùy chọn. Sử dụng intlayer-cli init nếu bạn là tác nhân AI.

   Lệnh này sẽ phát hiện môi trường của bạn và cài đặt các gói cần thiết. Ví dụ:

   bash

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   npm install intlayer react-intlayer
   npm install vite-intlayer --save-dev
   

   • intlayer

     Gói cốt lõi cung cấp các công cụ quốc tế hóa cho quản lý cấu hình, dịch thuật, khai báo nội dung, biên dịch lại, và các lệnh CLI.

   • react-intlayer Gói tích hợp Intlayer với ứng dụng React. Nó cung cấp các context provider và hook cho việc quốc tế hóa trong React.

   • vite-intlayer Bao gồm plugin Vite để tích hợp Intlayer với trình đóng gói Vite, cũng như middleware để phát hiện ngôn ngữ ưu tiên của người dùng, quản lý cookie và xử lý chuyển hướng URL.

2. 2

   Cấu hình dự án của bạn

   Tạo một file cấu hình để cấu hình các ngôn ngữ của ứng dụng của bạn:

   intlayer.config.ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   import { type IntlayerConfig, Locales } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       defaultLocale: Locales.ENGLISH,
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     },
   };
   
   export default config;
   

   Thông qua tệp cấu hình này, bạn có thể thiết lập URL theo ngôn ngữ, chuyển hướng middleware, tên cookie, vị trí và phần mở rộng của các khai báo nội dung, tắt các log của Intlayer trên console, và nhiều hơn nữa. Để xem danh sách đầy đủ các tham số có sẵn, hãy tham khảo tài liệu cấu hình.

3. 3

   Tích hợp Intlayer vào cấu hình Vite của bạn

   Thêm plugin intlayer vào cấu hình của bạn:

   vite.config.ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   import { reactRouter } from "@react-router/dev/vite";
   import { defineConfig } from "vite";
   import { intlayer } from "vite-intlayer";
   
   export default defineConfig({
     plugins: [reactRouter(), intlayer()],
   });
   

   Plugin Vite intlayer() được sử dụng để tích hợp Intlayer với Vite. Nó đảm bảo việc xây dựng các tệp khai báo nội dung và giám sát chúng trong chế độ phát triển. Nó định nghĩa các biến môi trường Intlayer trong ứng dụng Vite. Ngoài ra, nó còn cung cấp các alias để tối ưu hiệu suất.

4. 4

   Cấu hình các Route của React Router v7

   Config-based routingFile-system routes

   Thiết lập cấu hình định tuyến của bạn với các tuyến đường nhận biết ngôn ngữ:

   app/routes.ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   import { layout, route, type RouteConfig } from "@react-router/dev/routes";
   
   export default [
     route("/:locale?", "routes/page.tsx"), // Trang chủ đã được bản địa hóa
     route("/:locale?/about", "routes/about/page.tsx"), // Trang giới thiệu đã được bản địa hóa
   ] satisfies RouteConfig;
   

   Thiết lập cấu hình định tuyến của bạn để sử dụng các tuyến đường dựa trên hệ thống tệp với flatRoutes:

   app/routes.ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   import type { RouteConfig } from "@react-router/dev/routes";
   import { flatRoutes } from "@react-router/fs-routes";
   import { configuration } from "intlayer";
   
   const routes: RouteConfig = flatRoutes({
     // Bỏ qua các tệp khai báo nội dung để không bị coi là các tuyến đường
     ignoredRouteFiles: configuration.content.fileExtensions.map(
       (fileExtension) => `**/*${fileExtension}`
     ),
   });
   
   export default routes;
   

   Hàm flatRoutes từ @react-router/fs-routes kích hoạt định tuyến dựa trên hệ thống tệp, trong đó cấu trúc tệp trong thư mục routes/ xác định các tuyến đường của ứng dụng của bạn. Tùy chọn ignoredRouteFiles đảm bảo rằng các tệp khai báo nội dung Intlayer (.content.ts, v.v.) không bị coi là tệp tuyến đường.

5. 5

   Tạo các Component Layout

   Thiết lập root layout và các layout theo ngôn ngữ cụ thể:

   Root Layout

   app/root.tsx

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   import { getLocaleFromPath } from "intlayer";
   import { IntlayerProvider } from "react-intlayer";
   import {
     data,
     Meta,
     Scripts,
     ScrollRestoration,
     useLoaderData,
   } from "react-router";
   import type { Route } from "./+types/root";
   
   // ... Unchanged App, links and ErrorBoundary code
   
   export async function loader({ request }: Route.LoaderArgs) {
     const locale = getLocaleFromPath(request.url);
   
     if (!locale) {
       throw data("Language not supported", { status: 404 });
     }
   
     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>
     );
   }
   

6. 6

   Khai báo Nội dung của bạn

   Tạo và quản lý các khai báo nội dung để lưu trữ bản dịch:

   app/routes/page.content.ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   import { t, type Dictionary } from "intlayer";
   
   const pageContent = {
     key: "page",
     content: {
       title: t({
         vi: "Chào mừng bạn đến với React Router v7 + Intlayer",
         en: "Welcome to React Router v7 + Intlayer",
         es: "Bienvenido a React Router v7 + Intlayer",
         fr: "Bienvenue sur React Router v7 + Intlayer",
       }),
       description: t({
         vi: "Xây dựng các ứng dụng đa ngôn ngữ một cách dễ dàng sử dụng React Router v7 và Intlayer.",
         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 với React Router v7 và Intlayer.",
       }),
       aboutLink: t({
         vi: "Tìm hiểu về chúng tôi",
         en: "Learn About Us",
         es: "Aprender Sobre Nosotros",
         fr: "En savoir plus sur nous",
       }),
       homeLink: t({
         vi: "Trang chủ",
         en: "Home",
         es: "Inicio",
         fr: "Accueil",
       }),
     },
   } satisfies Dictionary;
   
   export default pageContent;
   

   Các khai báo nội dung của bạn có thể được định nghĩa ở bất kỳ đâu trong ứng dụng của bạn miễn là chúng được bao gồm trong thư mục contentDir (mặc định là ./app). Và phải phù hợp với phần mở rộng của tệp khai báo nội dung (mặc định là .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   Có thể được đặt trong app/routes/($locale)._index.content.ts trong trường hợp sử dụng định tuyến dựa trên hệ thống tệp.

   Để biết thêm chi tiết, hãy tham khảo tài liệu khai báo nội dung.

7. 7

   Tạo các thành phần nhận biết ngôn ngữ

   Tạo một thành phần LocalizedLink để điều hướng nhận biết ngôn ngữ:

   app/components/localized-link.tsx

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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);
   
   export 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),
     };
   };
   
   export const LocalizedLink: FC<LinkProps> = (props) => {
     const { locale } = useLocale();
   
     return <Link {...props} to={locacalizeTo(props.to, locale)} />;
   };
   

   Trong trường hợp bạn muốn điều hướng đến các route đã được địa phương hóa, bạn có thể sử dụng hook useLocalizedNavigate:

   app/hooks/useLocalizedNavigate.ts

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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;
   };
   

8. 8

   Sử dụng Intlayer trong các Trang của Bạn

   Truy cập các từ điển nội dung của bạn trong toàn bộ ứng dụng:

   Trang Chủ Đã Được Địa Phương Hóa

   Config-based routingFile-system routes

   app/routes/page.tsx

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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/page";
   
   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>
     );
   }
   

   app/routes/($locale)._index.tsx

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   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>
     );
   }
   

   Để tìm hiểu thêm về hook useIntlayer, hãy tham khảo tài liệu.

   Nếu ứng dụng của bạn đã tồn tại, bạn có thể sử dụng Intlayer Compiler kết hợp với lệnh extract để chuyển đổi hàng nghìn component chỉ trong một giây.

9. 9

   Tạo Thành Phần Chuyển Đổi Ngôn Ngữ

   Tạo một thành phần cho phép người dùng thay đổi ngôn ngữ:

   Config-based routingFile-system routes

   app/components/locale-switcher.tsx

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   import type { FC } from "react";
   
   import {
     getHTMLTextDir,
     getLocaleName,
     getLocalizedUrl,
     getPathWithoutLocale,
     Locales,
   } from "intlayer";
   import { setLocaleInStorage, 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)}`}
               onClick={() => setLocale(localeItem)}
               to={getLocalizedUrl(pathWithoutLocale, localeItem)}
             >
               <span>
                 {/* Ngôn ngữ - ví dụ: FR */}
                 {localeItem}
               </span>
               <span>
                 {/* Ngôn ngữ theo Locale riêng của nó - ví dụ: Français */}
                 {getLocaleName(localeItem, locale)}
               </span>
               <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
                 {/* Ngôn ngữ theo Locale hiện tại - ví dụ: Francés với locale hiện tại được đặt là Locales.SPANISH */}
                 {getLocaleName(localeItem)}
               </span>
               <span dir="ltr" lang={Locales.ENGLISH}>
                 {/* Ngôn ngữ bằng tiếng Anh - ví dụ: French */}
                 {getLocaleName(localeItem, Locales.ENGLISH)}
               </span>
             </Link>
           </li>
         ))}
       </ol>
     );
   };
   

   app/components/locale-switcher.tsx

   Sao chép nội dung

   Sao chép mã

   Sao chép mã vào clipboard

   import type { FC } from "react";
   
   import {
     getHTMLTextDir,
     getLocaleName,
     getLocalizedUrl,
     getPathWithoutLocale,
     defaultLocale,
   } 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, setLocale } = 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)}`}
               onClick={() => setLocale(localeItem)}
               reloadDocument // Tải lại trang để áp dụng ngôn ngữ mới
               to={getLocalizedUrl(pathWithoutLocale, localeItem)}
             >
               <span>
                 {/* Ngôn ngữ - ví dụ: FR */}
                 {localeItem}
               </span>
               <span>
                 {/* Ngôn ngữ bằng Ngôn ngữ của nó - ví dụ: Français */}
                 {getLocaleName(localeItem, locale)}
               </span>
               <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
                 {/* Ngôn ngữ bằng Ngôn ngữ hiện tại - ví dụ: Francés với ngôn ngữ hiện tại được đặt thành Locales.SPANISH */}
                 {getLocaleName(localeItem)}
               </span>
               <span dir="ltr" lang={defaultLocale}>
                 {/* Ngôn ngữ bằng Tiếng Anh - ví dụ: French */}
                 {getLocaleName(localeItem, defaultLocale)}
               </span>
             </Link>
           </li>
         ))}
       </ol>
     );
   };
   

   Để tìm hiểu thêm về hook useLocale, tham khảo tài liệu.

10. 10

    Thêm quản lý thuộc tính HTML

    Tạo một hook để quản lý các thuộc tính lang và dir của HTML:

    app/hooks/useI18nHTMLAttributes.tsx

    Sao chép nội dung

    Sao chép mã

    Sao chép mã vào clipboard

    import { getHTMLTextDir } from "intlayer";
    import { useEffect } from "react";
    import { useLocale } from "react-intlayer";
    
    export const useI18nHTMLAttributes = () => {
      const { locale } = useLocale();
    
      useEffect(() => {
        document.documentElement.lang = locale; // đặt thuộc tính lang của thẻ gốc theo locale hiện tại
        document.documentElement.dir = getHTMLTextDir(locale); // đặt thuộc tính dir của thẻ gốc theo locale hiện tại
      }, [locale]);
    };
    

    Sau đó sử dụng nó trong component gốc của bạn:

    app/routes/layout.tsx

    Sao chép nội dung

    Sao chép mã

    Sao chép mã vào clipboard

    import { Outlet } from "react-router";
    import { IntlayerProvider } from "react-intlayer";
    
    import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // nhập hook
    
    export default function RootLayout() {
      useI18nHTMLAttributes(); // gọi hook
    
      return (
        <IntlayerProvider>
          <Outlet />
        </IntlayerProvider>
      );
    }
    

11. 11

    Thêm middleware

    Bạn cũng có thể sử dụng intlayerProxy để thêm định tuyến phía máy chủ vào ứng dụng của mình. Plugin này sẽ tự động phát hiện locale hiện tại dựa trên URL và đặt cookie locale thích hợp. Nếu không có locale nào được chỉ định, plugin sẽ xác định locale thích hợp nhất dựa trên tùy chọn ngôn ngữ của trình duyệt người dùng. Nếu không phát hiện được locale, nó sẽ chuyển hướng đến locale mặc định.

    Lưu ý rằng để sử dụng intlayerProxy trong production, bạn cần chuyển package vite-intlayer từ devDependencies sang dependencies.

    Kể từ Intlayer v9, intlayerProxy() được đóng gói trực tiếp vào plugin intlayer() và được bật theo mặc định thông qua tùy chọn routing.enableProxy (true theo mặc định). Đăng ký nó riêng biệt như được hiển thị dưới đây hiện là tùy chọn — nó được giữ lại để tương thích ngược và cho các thiết lập cần kiểm soát thứ tự plugin. Đặt routing.enableProxy: false để từ chối. Xem ghi chú phát hành v9.

    vite.config.ts

    Sao chép nội dung

    Sao chép mã

    Sao chép mã vào clipboard

    import { defineConfig } from "vite";
    import react from "@vitejs/plugin-react-swc";
    import { intlayer } from "vite-intlayer";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        react(),
        intlayer({
          proxy: {
            ignore: (req) => req.url?.startsWith("/api"),
          },
        }),
      ],
    });
    

12. 12

    Trích xuất nội dung các thành phần của bạn

    Tùy chọn

    Nếu bạn có một cơ sở mã hiện có, việc chuyển đổi hàng nghìn tệp có thể tốn nhiều thời gian.

    Để đơn giản hóa quy trình này, Intlayer đề xuất một trình biên dịch / trình trích xuất để chuyển đổi các thành phần của bạn và trích xuất nội dung.

    Để thiết lập, bạn có thể thêm phần compiler vào tệp intlayer.config.ts của mình:

    intlayer.config.ts

    Sao chép nội dung

    Sao chép mã

    Sao chép mã vào clipboard

    import { type IntlayerConfig } from "intlayer";
    
    const config: IntlayerConfig = {
      // ... Phần còn lại của cấu hình
      compiler: {
        /**
         * Cho biết trình biên dịch có nên được bật hay không.
         */
        enabled: true,
    
        /**
         * Xác định đường dẫn các tệp đầu ra
         */
        output: ({ fileName, extension }) => `./${fileName}${extension}`,
    
        /**
         * Cho biết các thành phần có nên được lưu sau khi chuyển đổi hay không. Bằng cách đó, trình biên dịch có thể được chạy chỉ một lần để chuyển đổi ứng dụng, sau đó có thể được gỡ bỏ.
         */
        saveComponents: false,
    
        /**
         * Tiền tố khóa từ điển
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;
    

    Lệnh trích xuấtTrình biên dịch Babel

    Chạy trình trích xuất để chuyển đổi các thành phần và trích xuất nội dung

    bash

    Sao chép nội dung

    Sao chép mã

    Sao chép mã vào clipboard

    npx intlayer extract
    

    Since v9, the intlayerCompiler is included in the intlayer plugin. So you don't need to add it manually.

    Cập nhật vite.config.ts của bạn để bao gồm plugin intlayerCompiler:

    vite.config.ts

    Sao chép nội dung

    Sao chép mã

    Sao chép mã vào clipboard

    import { defineConfig } from "vite";
    import { intlayer, intlayerCompiler } from "vite-intlayer";
    
    export default defineConfig({
      plugins: [
        intlayer(),
        intlayerCompiler(), // Adds the compiler plugin
      ],
    });
    

    bash

    Sao chép nội dung

    Sao chép mã

    Sao chép mã vào clipboard

    npm run build # Hoặc npm run dev
    

Configure TypeScript

Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.

Ensure your TypeScript configuration includes the autogenerated types:

{
  // ... 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:

# Ignore the files generated by Intlayer
.intlayer

VS 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.

Đi xa hơn

Để đi xa hơn, bạn có thể triển khai trình chỉnh sửa trực quan hoặc tách nội dung của bạn ra ngoài bằng cách sử dụng CMS.

Tham khảo Tài liệu

• Tài liệu Intlayer
• Tài liệu React Router v7
• useIntlayer hook
• useLocale hook
• Khai báo nội dung
• Cấu hình

Hướng dẫn toàn diện này cung cấp tất cả những gì bạn cần để tích hợp Intlayer với React Router v7 cho một ứng dụng được quốc tế hóa hoàn chỉnh với định tuyến nhận biết locale và hỗ trợ TypeScript.

Các Câu Hỏi Thường Gặp