# General Translation React SDKs (gt-react, gt-next, gt-react-native): `` URL: https://generaltranslation.com/ru/docs/react/reference/components/gt-provider.mdx Docs index: https://generaltranslation.com/llms.txt Description: Предоставляет контекст переводов и локали дереву компонентов React. Справочник API для компонента ``. Работа `` зависит от фреймворка и маршрутизатора. Некоторые провайдеры получают данные локали как пропсы, а другие сами определяют и загружают их. *Примечание: React SPA, инициализированные с помощью [`initializeGTSPA`](/docs/react/reference/config#initialize-spa), используют глобальный кэш переводов и не требуют провайдера.* *Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`.* ## Обзор [#overview] | Runtime | Обязательные пропсы | Локаль и источник переводов | | ------------------------- | ------------------------ | ------------------------------------------------------------- | | Серверный рендеринг React | `locale`, `translations` | Ваш серверный загрузчик | | Next.js App Router | Нет | Запрос и кэш `gt-next` | | Next.js Pages Router | `locale`, `translations` | Обёртки данных Pages Router | | TanStack Start | `locale`, `translations` | Ваш загрузчик запросов | | React Native | Нет | Нативное определение локали и настроенный загрузчик переводов | В разделе [Пропсы](#props) указано, какие варианты провайдера принимают каждый проп. ## Контракты фреймворков [#contracts] Приложения `gt-react` с серверным рендерингом передают активную локаль и снимок переводов. Загружайте снимок после [`initializeGT`](/docs/react/reference/config#initialize). ```tsx import { GTProvider } from 'gt-react'; ``` [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) и учётные данные следует указывать в [вызове инициализации](/docs/react/reference/config#initialization), а не в провайдере. **Изменено в v11:** `` из `gt-react` больше не принимает `config`, [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) и учётные данные. Перенесите их в [`initializeGT`](/docs/react/reference/config#initialize), затем передайте в провайдер разрешённые значения `locale` и `translations`. ### App Router Провайдер для App Router — это асинхронный серверный компонент только с пропсом `children`. Он определяет локаль, регион, состояние перевода, переводы и словари на основе запроса и кэша `gt-next`. ```tsx title="app/layout.tsx" import { GTProvider } from 'gt-next'; export default function RootLayout({ children }) { return {children}; } ``` Не передавайте `locale`, `translations`, `dictionaries`, `region` или `enableI18n` в провайдер для App Router. ### Pages Router Pages Router повторно экспортирует общий провайдер из `gt-react`. Передавайте значения, добавленные через [серверный рендеринг](/docs/react/nextjs-pages-router-quickstart#quickstart) или [статическую генерацию](/docs/react/nextjs/pages-router-static-site-generation), и укажите `_reload`, если при смене локали должна использоваться маршрутизация Next.js. ```tsx title="pages/_app.tsx" import Router from 'next/router'; import { GTProvider } from 'gt-next'; { void Router.push(Router.pathname, Router.asPath, { locale }); }} > ``` `gt-tanstack-start` повторно экспортирует общий провайдер. После регистрации [`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware) передайте активную локаль и её снимок переводов. ```tsx import { GTProvider } from 'gt-tanstack-start'; ``` Провайдер для React Native определяет начальную локаль, загружает её переводы и повторно рендерит содержимое при смене локали. `locale` необязателен, а `translations` не является публичным пропсом. ```tsx import { GTProvider } from 'gt-react-native'; ``` Передайте `fallback`, чтобы заменить встроенный индикатор загрузки на время загрузки переводов. ## Как это работает [#how-it-works] * **React, TanStack Start и Next.js Pages Router.** Провайдер заранее получает снимок переводов, поэтому переведённый контент отображается синхронно. * **Next.js App Router.** Серверный провайдер считывает состояние запроса и загружает переводы и словари перед рендерингом своей клиентской границы. * **React Native.** Провайдер загружает переводы для определённой локали через Suspense. До их готовности отображается `fallback`. * **Контекст для дерева.** Дочерние компоненты получают из контекста провайдера активную локаль, переводы, словари, регион и состояние перевода. * **Изменение локали.** Веб-провайдеры сохраняют локаль в cookie-файле и запускают перезагрузку. React Native сохраняет её в нативном хранилище и обновляет состояние провайдера. ## Пропсы [#props] | Пропс | Описание | Тип | Необязательно | По умолчанию | | ------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------- | ------------------------------------------------------- | | [`children`](#children) | Дерево компонентов. Поддерживается всеми провайдерами. | `ReactNode` | Да | — | | [`locale`](#locale) | Активная локаль. Обязательна в React, TanStack Start и Next.js Pages Router; необязательна в React Native; не поддерживается в Next.js App Router. | `string \| LocaleCandidates` | Зависит от фреймворка | Локаль устройства или сохранённая локаль в React Native | | [`translations`](#translations) | Снимок переводов. Обязателен в React, TanStack Start и Next.js Pages Router; не поддерживается в Next.js App Router и React Native. | `object` | Зависит от фреймворка | — | | [`dictionaries`](#dictionaries) | Словари для каждой локали. Поддерживаются в React, TanStack Start, Next.js Pages Router и React Native; в Next.js App Router загружаются автоматически. | `object` | Да | — | | [`region`](#region) | Активный регион. Поддерживается в React, TanStack Start, Next.js Pages Router и React Native; в Next.js App Router определяется автоматически. | `string` | Да | Сохранённый регион или `undefined` | | [`enableI18n`](#enable-i18n) | Определяет, нужно ли выполнять перевод. Поддерживается в React, TanStack Start, Next.js Pages Router и React Native; в Next.js App Router определяется автоматически. | `boolean` | Да | `true` | | [`fallback`](#fallback) | Контент, отображаемый во время загрузки переводов в React Native. Только для React Native. | `ReactNode` | Да | Индикатор загрузки | | [`_reload`](#reload) | Колбэк перезагрузки фреймворка. Поддерживается в React, TanStack Start и Next.js Pages Router; не поддерживается в Next.js App Router и React Native. | `(state) => void` | Да | Зависит от фреймворка | | [`onMissingTranslation`](#missing-translation) | Обрабатывает отсутствующий inline- или JSX-перевод. Не поддерживается в Next.js App Router. | `OnMissingTranslation` | Да | — | | [`onMissingDictionaryEntry`](#missing-dictionary-entry) | Обрабатывает отсутствующую запись словаря. Не поддерживается в Next.js App Router. | `OnMissingDictionaryEntry` | Да | — | | [`onMissingDictionaryObj`](#missing-dictionary-object) | Обрабатывает отсутствующий объект словаря. Не поддерживается в Next.js App Router. | `OnMissingDictionaryObj` | Да | — | ### `children` [#children] **Тип** `ReactNode` · **Необязательно** Дерево компонентов, получающее контекст перевода. Каждый вариант провайдера принимает `children`. ### `locale` [#locale] **Тип** `string | LocaleCandidates` · **Зависит от фреймворка** Активная локаль для дерева: * Обязательна в виде разрешённой `string` в React, TanStack Start и Next.js Pages Router. * Необязательна в React Native: принимает кандидаты локали и по умолчанию использует сохранённую локаль или локаль устройства. * Не поддерживается провайдером Next.js App Router, который определяет локаль запроса внутри. Получите результат в нижележащих компонентах с помощью [`useLocale`](/docs/react/reference/hooks/use-locale). ### `translations` [#translations] **Тип** `Record>` · **Зависит от фреймворка** Снимок переводов, сформированный [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot). Он необходим в React, TanStack Start и Next.js Pages Router, чтобы эти провайдеры могли синхронно получать контент. Провайдер Next.js App Router загружает снимок самостоятельно. Провайдер React Native не принимает prop `translations` и сам загружает переводы для активной локали. ### `dictionaries` [#dictionaries] **Тип** `Record` · **Необязательно** Словари для каждой локали, используемые [`useTranslations`](/docs/react/reference/hooks/use-translations) для поиска по `id`. React, TanStack Start, Next.js Pages Router и React Native принимают этот prop. Провайдер Next.js App Router загружает словари самостоятельно. ### `region` [#region] **Тип** `string` · **Необязательно** Код активного региона, например `US` или `GB`. React, TanStack Start, Next.js Pages Router и React Native поддерживают этот prop. Next.js App Router определяет регион из запроса. ### `enableI18n` [#enable-i18n] **Тип** `boolean` · **Необязательно** · **По умолчанию** `true` Определяет, нужно ли переводить контент. Если `false`, провайдер отображает контент на исходной локали. React, TanStack Start, Next.js Pages Router и React Native поддерживают этот prop. Next.js App Router разрешает значение на основе состояния запроса. ### `fallback` [#fallback] **Тип** `ReactNode` · **Необязательно** Контент, отображаемый только в React Native во время загрузки переводов. По умолчанию используется расположенный по центру React Native `ActivityIndicator`. ### `_reload` [#reload] **Тип** `(state: { locale: string; region: string | undefined; enableI18n: boolean }) => void` · **Необязательно** · **По умолчанию** Зависит от фреймворка Функция обратного вызова, вызываемая после изменения веб-локали, региона или состояния перевода. React и TanStack Start принимают её через общий провайдер. Next.js Pages Router использует её, чтобы заменить полную перезагрузку страницы вызовом `Router.push`. Обычный `gt-react` и Next.js Pages Router в качестве резервного варианта используют `window.location.reload`. TanStack Start обеспечивает навигацию по pathname при включённой маршрутизации по локалям. Провайдер Next.js App Router предоставляет собственную функцию обратного вызова и не принимает этот prop: обычно он вызывает `router.refresh`, но перезагружает документ, когда middleware должен удалить префикс локали, не являющейся локалью по умолчанию, после переключения на локаль по умолчанию. Вместо этого React Native обновляет состояние провайдера. ### `onMissingTranslation` [#missing-translation] **Тип** `OnMissingTranslation` · **Необязательно** Расширенная функция обратного вызова, вызываемая при отсутствии inline- или JSX-перевода. Провайдеры для браузера и React Native могут использовать переданную функцию обратного вызова. Провайдеры с серверным рендерингом устанавливают собственный обработчик. ### `onMissingDictionaryEntry` [#missing-dictionary-entry] **Тип** `OnMissingDictionaryEntry` · **Необязательно** Расширенная функция обратного вызова, вызываемая при отсутствии записи в словаре. Провайдеры для браузера и React Native могут использовать переданную функцию обратного вызова. Провайдеры с серверным рендерингом устанавливают собственный обработчик. ### `onMissingDictionaryObj` [#missing-dictionary-object] **Тип** `OnMissingDictionaryObj` · **Необязательно** Расширенная функция обратного вызова, вызываемая при отсутствии объекта словаря. Провайдеры для браузера и React Native могут использовать переданную функцию обратного вызова. Провайдеры с серверным рендерингом устанавливают собственный обработчик. ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.