# General Translation React SDKs (gt-react, gt-next): Настройка TanStack Start URL: https://generaltranslation.com/ru/docs/react/tanstack-start/setup.mdx --- title: Настройка TanStack Start description: Инициализируйте General Translation в приложении TanStack Start, определите локаль и гидратируйте провайдер из корневого маршрута. --- `gt-tanstack-start` полностью настраивается в корневом маршруте. Вы вызываете [`initializeGT`](/docs/node/reference/functions/initialize-gt) на уровне модуля, определяете локаль запроса с помощью `parseLocale`, загружаете снимок переводов в loader маршрута и передаёте и то и другое в [``](/docs/react/reference/components/gt-provider). Поскольку TanStack Start рендерит на сервере, провайдеру заранее нужны локаль и переводы, поэтому в этом шаблоне они гидратируются данными из loader. На этой странице описана настройка для TanStack Start. Полную инструкцию, включая установку и CLI, см. в [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart). *Предупреждение: `gt-tanstack-start` является экспериментальным, и в нём возможны несовместимые изменения.* ## Загрузка переводов [#load-translations] Создайте функцию [`loadTranslations`](/docs/react/reference/functions/load-translations), которая импортирует файл перевода для локали. Храните файлы в `src/`, чтобы Vite мог их импортировать. ```ts title="loadTranslations.ts" export default async function loadTranslations(locale: string) { const translations = await import(`./src/_gt/${locale}.json`); return translations.default; } ``` CLI создаёт эти файлы при запуске `npx gt translate`. ## Инициализация и определение локали [#initialize] `initializeGT`, `parseLocale` и [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) импортируются из `gt-tanstack-start`: * **`initializeGT`** — вызовите один раз на уровне модуля корневого маршрута. Передайте содержимое `gt.config.json` через spread и укажите `loadTranslations`. * **`parseLocale`** — считывает локаль из cookie-файла запроса и заголовка `Accept-Language` на сервере, а в браузере — из cookie-файла. Затем сохраняет определённую локаль обратно в cookie-файл. * **`getTranslationsSnapshot`** — загружает переводы для локали в формате, который ожидает ``, чтобы контент отображался без мерцания при загрузке. См. [справочник](/docs/react/reference/functions/get-translations-snapshot). ## Настройте корневой маршрут [#root-route] В `src/routes/__root.tsx` выполните инициализацию на уровне модуля, определите локаль и загрузите снимок в loader, а затем передайте `locale` и `translations` в `` через компонент-оболочку. ```tsx title="src/routes/__root.tsx" import { HeadContent, Scripts, createRootRoute, } from '@tanstack/react-router'; import { initializeGT, GTProvider, parseLocale, getTranslationsSnapshot, LocaleSelector, } from 'gt-tanstack-start'; import gtConfig from '../../gt.config.json'; import loadTranslations from '../../loadTranslations'; // Инициализируем General Translation один раз, на уровне модуля initializeGT({ ...gtConfig, loadTranslations }); export const Route = createRootRoute({ loader: async () => { const locale = parseLocale(); return { locale, translations: await getTranslationsSnapshot(locale), }; }, shellComponent: RootDocument, }); function RootDocument({ children }: { children: React.ReactNode }) { const { locale, translations } = Route.useLoaderData(); return ( {children} ); } ``` `` требует здесь и `locale`, и `translations` — в отличие от Next.js, где сервер сам их получает, или React Native, где провайдер сам их загружает. ## Пометьте контент для перевода [#content] В компонентах маршрутов оборачивайте JSX в [``](/docs/react/reference/components/t), а строки переводите с помощью [`useGT`](/docs/react/reference/hooks/use-gt). Импортируйте их из `gt-react`, чтобы CLI распознал их при сканировании исходного кода. ```tsx title="src/routes/index.tsx" import { createFileRoute } from '@tanstack/react-router'; import { T, useGT } from 'gt-react'; export const Route = createFileRoute('/')({ component: Home }); function Home() { const gt = useGT(); return (

Welcome to my app

This content is translated automatically.

); } ```