# General Translation React SDKs (gt-react, gt-next, gt-react-native): Быстрый старт с React Router
URL: https://generaltranslation.com/ru/docs/react/react-router-quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Добавьте General Translation в приложение на фреймворке React Router, включая витрины Shopify Hydrogen, и переведите первый контент.
В режиме фреймворка React Router `gt-react` подключается через корневой маршрут. Библиотека инициализируется в `app/root.tsx`, локаль каждого посетителя разрешается в корневом загрузчике, а [`GTProvider`](/docs/react/reference/components/gt-provider) отображается в корневом `Layout`.
Это руководство предназначено для приложений, созданных с помощью `@react-router/dev`. Если вы используете React Router как библиотеку в одностраничном приложении на Vite, воспользуйтесь руководством [Быстрый старт SPA для React](/docs/react/react-spa-quickstart).
Чтобы автоматизировать настройку, выполните [`npx gt@latest init`](/docs/cli/reference/commands/init) в корневом каталоге приложения. Мастер установит `gt-react`, создаст конфигурацию и загрузчик переводов, а также настроит `app/root.tsx`, созданный из стартового шаблона create-react-router или Hydrogen. Остальные корневые файлы он не изменяет, а выводит список действий, которые нужно выполнить вручную. В этом руководстве та же настройка описана пошагово вручную.
*Примечание: для этой настройки требуется `gt-react` версии 11.1.3 или новее, а приложение должно выполнять рендеринг при каждом запросе. Режим SPA (`ssr: false`), предварительный рендеринг и RSC Framework Mode не поддерживаются.*
## Быстрый старт [#quickstart]
### 1. Установите пакеты
`gt-react` — библиотека, которая отвечает за переводы в вашем приложении. `gt` — CLI, который их генерирует.
```bash
npm install gt-react && npm install gt --save-dev
```
```bash
yarn add gt-react && yarn add --dev gt
```
```bash
bun add gt-react && bun add --dev gt
```
```bash
pnpm add gt-react && pnpm add --save-dev gt
```
### 2. Создайте `gt.config.json`
Создайте файл `gt.config.json` в корневом каталоге проекта. В нём задаются язык-источник, целевые локали и каталог, в который записываются файлы перевода.
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "ja"],
"files": {
"gt": {
"output": "app/_gt/[locale].json"
}
}
}
```
* `defaultLocale` — язык, на котором написано ваше приложение.
* `locales` — языки, на которые нужно перевести приложение. Выберите их из списка [поддерживаемых локалей](/docs/platform/dashboard/reference/supported-locales).
* `files.gt.output` — путь, по которому CLI записывает файлы перевода. Размещайте их в `app/`, чтобы Vite включал их в бандлы вместе с серверным и клиентским кодом.
### 3. Создайте загрузчик переводов
Создайте файл `app/loadTranslations.ts`. Он импортирует файл перевода нужной локали по запросу корневого загрузчика.
```ts title="app/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
const translations = await import(`./_gt/${locale}.json`);
return translations.default;
}
```
Затем создайте пустой файл `{}` для каждой целевой локали, например `app/_gt/es.json` и `app/_gt/ja.json`; [`gt init`](/docs/cli/reference/commands/init) создаёт их автоматически. Локаль без файла перевода отображается на языке по умолчанию.
### 4. Настройте корневой маршрут
Вызовите [`initializeGT`](/docs/react/reference/config#initialize) один раз в области видимости модуля в `app/root.tsx`, верните локаль и снимок переводов из корневого загрузчика и оберните содержимое `Layout` в [`GTProvider`](/docs/react/reference/components/gt-provider). Добавьте выделенные строки в существующий корневой файл:
```tsx title="app/root.tsx"
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteLoaderData, // [!code ++]
} from 'react-router';
import { GTProvider, getTranslationsSnapshot, initializeGT, parseLocale } from 'gt-react'; // [!code ++]
import type { Route } from './+types/root';
import gtConfig from '../gt.config.json'; // [!code ++]
import loadTranslations from './loadTranslations'; // [!code ++]
import './app.css';
initializeGT({ ...gtConfig, loadTranslations }); // [!code ++]
// [!code ++:11]
// У страниц ошибок нет данных загрузчика. Там GTProvider пропускается, чтобы он
// не заменил сохранённую локаль посетителя локалью по умолчанию.
function RootGTProvider({ children }: { children: React.ReactNode }) {
const data = useRouteLoaderData('root');
if (!data) return <>{children};
return (
{children}
);
}
// [!code ++:4]
export async function loader({ request }: Route.LoaderArgs) {
const locale = parseLocale(request);
return { locale, translations: await getTranslationsSnapshot(locale) };
}
export function Layout({ children }: { children: React.ReactNode }) {
const locale = useRouteLoaderData('root')?.locale ?? gtConfig.defaultLocale; // [!code ++]
return (
// [!code ++]
{/* [!code ++] */}
{children}
{/* [!code ++] */}
);
}
export default function App() {
return ;
}
```
`parseLocale` считывает cookie-файл локали, затем заголовок `Accept-Language`, а если определить локаль не удаётся, использует резервное значение `defaultLocale`. Если в корневом маршруте уже есть `loader`, добавьте `locale` и `translations` в возвращаемый им объект.
*Примечание: страницы ошибок, для которых нет данных корневого загрузчика (например, при прямом переходе на 404 или при ошибке в корневом загрузчике), рендерятся без [`GTProvider`](/docs/react/reference/components/gt-provider). Компоненты перевода и хуки, такие как [``](/docs/react/reference/components/t) и [`useLocale`](/docs/react/reference/hooks/use-locale), в этом случае выбрасывают исключение, и страница ошибки превращается в ошибку сервера, поэтому не используйте перевод в корневом `ErrorBoundary`.*
### 5. Отметьте контент для перевода
Оберните JSX в компонент [``](/docs/react/reference/components/t), чтобы перевести его на месте, а для обычных строк, например значений `aria-label`, используйте [`useGT`](/docs/react/reference/hooks/use-gt). Добавьте [``](/docs/react/reference/components/locale-selector), чтобы посетители могли переключать язык.
```tsx title="app/routes/home.tsx"
import { LocaleSelector, T, useGT } from 'gt-react';
export default function Home() {
const gt = useGT();
return (