Задайте питання та отримайте підсумок документа, вказавши цю сторінку та обраного вами постачальника штучного інтелекту
Історія версій
- "Оновлення використання API useIntlayer у Solid для прямого доступу до властивостей"v8.9.004.05.2026
- "Додано команду init"v7.5.930.12.2025
- "Оновлено Layout і обробку 404"v7.5.627.12.2025
- "Оновлено документацію"v6.1.503.10.2025
- "Додано для React Router v7"v5.8.204.09.2025
Вміст цієї сторінки перекладено за допомогою штучного інтелекту.
Переглянути останню версію оригінального вмісту англійськоюЯкщо у вас є ідея щодо покращення цієї документації, будь ласка, долучіться, надіславши pull request на GitHub.
Посилання на документацію на GitHubСкопіювати документацію у форматі Markdown в буфер обміну
Перекладіть ваш вебсайт на React Router v7 за допомогою Intlayer | Інтернаціоналізація (i18n)
Цей посібник показує, як інтегрувати Intlayer для безшовної інтернаціоналізації в проєктах на React Router v7 з маршрутизацією, чутливою до локалі, підтримкою TypeScript та сучасними практиками розробки.
Цей посібник зосереджений на frontend-маршрутизації. Для маршрутизації з fs-routes зверніться до посібника Intlayer з React Router v7 File-System Routes.
Зміст
Що таке Intlayer?
Intlayer, інноваційна open-source бібліотека для інтернаціоналізації (i18n), створена для спрощення підтримки багатомовності в сучасних веб-додатках.
З Intlayer ви можете:
- Легко керувати перекладами за допомогою декларативних словників на рівні компонентів.
- Динамічно локалізувати метадані, маршрути та контент.
- Забезпечити підтримку TypeScript за допомогою автогенерованих типів, що покращує автозаповнення та виявлення помилок.
- Отримати вигоду від розширених можливостей, таких як динамічне визначення та перемикання локалі.
- Увімкнути маршрутизацію з урахуванням локалі за допомогою конфігураційної системи маршрутизації React Router v7.
Покрокове керівництво з налаштування Intlayer у застосунку на React Router v7
Крок 1: Встановлення залежностей
Встановіть необхідні пакети, використовуючи ваш улюблений package manager:
Скопіюйте код у буфер обміну
npm install intlayer react-intlayernpm install vite-intlayer --save-devnpx intlayer initintlayer
Базовий пакет, який надає інструменти інтернаціоналізації для керування конфігурацією, перекладів, оголошення вмісту, транспіляції та команд CLI.
react-intlayer Пакет, який інтегрує Intlayer у React-додаток. Він забезпечує провайдери контексту та хуки для інтернаціоналізації в React.
vite-intlayer Містить Vite-плагін для інтеграції Intlayer з зборщиком Vite, а також middleware для визначення переважної локалі користувача, керування cookie та обробки перенаправлень URL.
Крок 2: Конфігурація вашого проєкту
Покроковий посібник зі встановлення Intlayer у застосунок React Router v7 із маршрутами на основі файлової системи
Перегляньте Шаблон застосунку на GitHub.
Створіть конфігураційний файл для налаштування мов вашого застосунку:
Скопіюйте код у буфер обміну
import { type IntlayerConfig, Locales } from "intlayer";
const config: IntlayerConfig = {
internationalization: {
defaultLocale: Locales.ENGLISH,
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
},
};
export default config;Через цей файл конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення через middleware, назви cookie, розташування та розширення ваших декларацій контенту, вимкнути логи Intlayer в консолі та інше. Для повного переліку доступних параметрів див. документацію з конфігурації.
Крок 3: Інтеграція Intlayer у вашу конфігурацію Vite
Додайте плагін intlayer у вашу конфігурацію:
Скопіюйте код у буфер обміну
import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({ plugins: [reactRouter(), intlayer()],});Плагін Vite intlayer() використовується для інтеграції Intlayer з Vite. Він забезпечує побудову файлів декларацій контенту та відстежує їх у режимі розробки. Він визначає змінні середовища Intlayer у застосунку Vite. Додатково надає aliases для оптимізації продуктивності.
Крок 4: Налаштуйте маршрути React Router v7
Налаштуйте конфігурацію маршрутизації для маршрутів, які враховують локаль:
Скопіюйте код у буфер обміну
import { layout, route, type RouteConfig } from "@react-router/dev/routes";export default [ route("/:lang?", "routes/page.tsx"), // Локалізована домашня сторінка route("/:lang?/about", "routes/about/page.tsx"), // Локалізована сторінка 'about'] satisfies RouteConfig;Крок 5: Створіть компоненти layout
Налаштуйте свій root layout та layout-и для кожної локалі:
Кореневий layout
Скопіюйте код у буфер обміну
import { getLocaleFromPath } from "intlayer";import { IntlayerProvider } from "react-intlayer";import { data, Meta, Scripts, ScrollRestoration, useLoaderData,} from "react-router";import type { Route } from "./+types/root";// ... Код App, links та ErrorBoundary без змінexport async function loader({ request }: Route.LoaderArgs) { const locale = getLocaleFromPath(request.url); if (!locale) { throw data("Мова не підтримується", { 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: Оголосіть ваш контент
Створіть і керуйте деклараціями контенту для збереження перекладів:
Скопіюйте код у буфер обміну
import { t, type Dictionary } from "intlayer";const pageContent = { key: "page", content: { title: t({ uk: "Ласкаво просимо до 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({ uk: "Створюйте багатомовні застосунки легко з React Router v7 та 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 avec React Router v7 et Intlayer.", }), aboutLink: t({ uk: "Дізнатися про нас", en: "Learn About Us", es: "Aprender Sobre Nosotros", fr: "En savoir plus sur nous", }), homeLink: t({ uk: "Головна", en: "Home", es: "Inicio", fr: "Accueil", }), },} satisfies Dictionary;export default pageContent;Ваші декларації контенту можуть бути визначені будь-де у вашому застосунку, якщо вони поміщені до директоріїcontentDir(за замовчуванням./app). І вони повинні відповідати розширенню файлу декларацій контенту (за замовчуванням.content.{json,ts,tsx,js,jsx,mjs,cjs}).
Для докладнішої інформації див. документацію з декларацій контенту.
Крок 7: Створіть компоненти, які враховують локаль
Створіть компонент LocalizedLink для навігації з урахуванням локалі:
Скопіюйте код у буфер обміну
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)} />;};У разі, якщо ви хочете переходити на локалізовані маршрути, ви можете використати хук useLocalizedNavigate:
Скопіюйте код у буфер обміну
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: Використання Intlayer на ваших сторінках
Отримуйте доступ до словників контенту у всьому вашому застосунку:
Локалізована домашня сторінка
Скопіюйте код у буфер обміну
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("Локаль не підтримується", { 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> );}Щоб дізнатися більше про хук useIntlayer, зверніться до документації.
Якщо ваш застосунок уже існує, ви можете скористатися Intlayer Compiler у поєднанні з командой extract, щоб перетворити тисячі компонентів за одну секунду.
Крок 9: Створіть компонент перемикача локалі
Створіть компонент, який дозволить користувачам змінювати мову:
Скопіюйте код у буфер обміну
import type { FC } from "react";import { getHTMLTextDir, getLocaleName, getLocalizedUrl, getPathWithoutLocale,} 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> {/* Локаль, напр. FR */} {localeItem} </span> <span> {/* Мова у власній локалі, напр., Français */} {getLocaleName(localeItem, locale)} </span> <span dir={getHTMLTextDir(localeItem)} lang={localeItem}> {/* Мова у поточній локалі, наприклад, Francés коли поточна локаль встановлена в Locales.SPANISH */} {getLocaleName(localeItem)} </span> <span dir="ltr" lang={Locales.ENGLISH}> {/* Мова англійською, напр., French */} {getLocaleName(localeItem, Locales.ENGLISH)} </span> </Link> </li> ))} </ol> );};Щоб дізнатися більше про хук useLocale, зверніться до документації.
Крок 10: Додати керування атрибутами HTML (необов'язково)
Створіть хук для керування атрибутами lang та dir у HTML:
Скопіюйте код у буфер обміну
import { getHTMLTextDir } from "intlayer";import { useEffect } from "react";import { useLocale } from "react-intlayer";export const useI18nHTMLAttributes = () => { const { locale } = useLocale(); useEffect(() => { document.documentElement.lang = locale; document.documentElement.dir = getHTMLTextDir(locale); }, [locale]);};Потім використайте його у вашому кореневому компоненті:
Скопіюйте код у буфер обміну
import { Outlet } from "react-router";import { IntlayerProvider } from "react-intlayer";import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // імпортуйте хукexport default function RootLayout() { useI18nHTMLAttributes(); // виклик хука return ( <IntlayerProvider> <Outlet /> </IntlayerProvider> );}(Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
Щоб спростити цей процес, Intlayer пропонує компілятор / екстрактор для перетворення ваших компонентів і витягування вмісту.
Щоб налаштувати його, ви можете додати розділ compiler у свій файл intlayer.config.ts:
Скопіюйте код у буфер обміну
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... Інша частина вашої конфігурації
compiler: {
/**
* Вказує, чи повинен бути включений компілятор.
*/
enabled: true,
/**
* Визначає шлях до вихідних файлів
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* Вказує, чи повинні компоненти зберігатися після перетворення. Таким чином, компілятор можна запустити лише один раз для перетворення програми, а потім видалити.
*/
saveComponents: false,
/**
* Префікс ключа словника
*/
dictionaryKeyPrefix: "",
},
};
export default config;Запустіть екстрактор для перетворення компонентів і витягування вмісту
Скопіюйте код у буфер обміну
npx intlayer extractConfigure 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.intlayerVS 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.
Go Further
To go further, you can implement the visual editor or externalize your content using the CMS.
Documentation References
- Intlayer Documentation
- React Router v7 Documentation
- useIntlayer hook
- useLocale hook
- Content Declaration
- Configuration
This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 for a fully internationalized application with locale-aware routing and TypeScript support.
Крок 11: Додати middleware (необов'язково)
Ви також можете використовувати intlayerProxy для додавання маршрутизації на серверній стороні у ваш застосунок. Цей плагін автоматично визначає поточну locale на основі URL і встановлює відповідний cookie для locale. Якщо locale не вказано, плагін визначить найбільш підходящу locale на основі мовних налаштувань браузера користувача. Якщо ж жодну locale не буде виявлено, відбудеться перенаправлення на локаль за замовчуванням.
Зауважте, що для використанняintlayerProxyу production потрібно перемістити пакетvite-intlayerзdevDependenciesдоdependencies.
Скопіюйте код у буфер обміну
import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayer, intlayerProxy } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({ plugins: [ intlayerProxy(), // should be placed first react(), intlayer(), ],});Налаштування TypeScript
Intlayer використовує module augmentation, щоб отримати переваги TypeScript і зробити вашу codebase надійнішою.
Переконайтеся, що ваша конфігурація TypeScript включає автогенеровані типи:
Скопіюйте код у буфер обміну
{ // ... ваші існуючі налаштування include: [ // ... ваші існуючі includes ".intlayer/**/*.ts", // Включити автогенеровані типи ],}Конфігурація Git
Рекомендується ігнорувати файли, згенеровані Intlayer. Це дозволить уникнути їх додавання до вашого репозиторію Git.
Для цього ви можете додати наступні інструкції до файлу .gitignore:
Скопіюйте код у буфер обміну
# Ігнорувати файли, згенеровані Intlayer.intlayerРозширення VS Code
Щоб покращити досвід розробки з Intlayer, ви можете встановити офіційне розширення Intlayer VS Code Extension.
Встановити з VS Code Marketplace
Це розширення надає:
- Автодоповнення для ключів перекладу.
- Виявлення помилок у режимі реального часу для відсутніх перекладів.
- Вбудований перегляд перекладеного вмісту.
- Швидкі дії для простого створення та оновлення перекладів.
Для отримання детальнішої інформації про використання розширення див. документацію Intlayer VS Code Extension.
Подальші кроки
Щоб рухатися далі, ви можете реалізувати візуальний редактор або винести ваш контент, використовуючи CMS.
Посилання на документацію
- Документація Intlayer
- Документація React Router v7
- Хук useIntlayer
- Хук useLocale
- Оголошення контенту
- Конфігурація
Цей всебічний посібник містить усе необхідне для інтеграції Intlayer з React Router v7, щоб отримати повністю інтернаціоналізований додаток з маршрутизацією, яка враховує локаль, та підтримкою TypeScript.