Интеграция с React Router / Remix

Lingo.dev Compiler безупречно работает с React Router и последней версией Remix (которая теперь является React Router v7), обеспечивая локализацию на этапе сборки.

Следуйте этим шагам, чтобы добавить поддержку нескольких языков в ваше приложение на React Router или Remix.

Или изучите демо-проект React Router / Remix, чтобы увидеть Compiler в действии.

Предварительные требования

React Router v6+ или Remix
Vite в качестве инструмента сборки
React 18+
Node.js 18 или выше

Шаг 1. Установите пакет

Установите пакет lingo.dev:

bash npm install lingo.dev


## Шаг 2. Настройте Vite

Импортируйте и настройте компилятор в вашем `vite.config.ts`:

```ts
import { defineConfig } from "vite";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  // Ваша существующая конфигурация Vite
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "app",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);
```

## Шаг 3. Настройте аутентификацию

Создайте бесплатный аккаунт на [groq.com](https://groq.com/) и добавьте ваш API-ключ:

```bash

# .env

GROQ_API_KEY=gsk_...
```

## Шаг 4. Добавьте провайдер

### Для React Router

Импортируйте провайдер в ваш корневой компонент (`app/root.tsx`):

```tsx
import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";
import type { LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";

// Для React Router с загрузчиками данных
export async function loader(args: LoaderFunctionArgs) {
  return {
    lingoDictionary: await loadDictionary(args.request),
  };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}
```

### Для Remix

Импортируйте провайдер в ваш корневой маршрут (`app/root.tsx`):

```tsx
import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";
import type { LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";

export async function loader(args: LoaderFunctionArgs) {
  return json({
    lingoDictionary: await loadDictionary(args.request),
  });
}

export default function App() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <head>
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </body>
      </html>
    </LingoProvider>
  );
}
```

## Шаг 5. Необязательно: добавьте переключатель локалей

Создайте компонент переключателя языков:

```tsx
import { LocaleSwitcher } from "lingo.dev/react/client";

export function Header() {
  return (
    <header>
      <nav>
        <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
      </nav>
    </header>
  );
}
```

## Шаг 6. Сборка и тестирование

Запустите сервер разработки:

```bash
npm run dev
```

Компилятор автоматически выполнит следующие действия:

1. Сканирует ваши React-компоненты на наличие переводимого контента
2. Извлечет ключи переводов
3. Сгенерирует переводы с помощью ИИ
4. Создаст оптимизированные файлы переводов в директории `lingo/`

Перейдите по адресу `http://localhost:5173`, чтобы увидеть ваше многоязычное приложение в действии.

## Настройки конфигурации

Вы можете настроить поведение компилятора:

```ts
export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);
```

## Серверный рендеринг

Компилятор работает как с клиентским, так и с серверным рендерингом:

### Клиентские компоненты

```tsx
// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Добро пожаловать в наше приложение</h1>
      <p>Этот контент переводится автоматически</p>
    </div>
  );
}
```

### Компоненты маршрутов

```tsx
// app/routes/about.tsx
export default function About() {
  return (
    <div>
      <h1>О нас</h1>
      <p>Узнайте больше о нашей компании</p>
    </div>
  );
}
```

## Развертывание в продакшн

1. **Соберите ваше приложение**:

   ```bash
   npm run build
   ```

2. **Закоммитьте файлы переводов**:

   ```bash
   git add lingo/
   git commit -m "Добавить переводы"
   ```

3. **Разверните** на вашей предпочтительной платформе

Ваше приложение на React Router или Remix будет автоматически предоставлять локализованный контент на основе предпочтений пользователя или шаблонов URL.

## Следующие шаги

- **Расширенная конфигурация**: [Варианты настройки](../configuration/advanced)
- **Часто задаваемые вопросы**: [Общие вопросы и устранение неполадок](../guides/faq)
- **Как это работает**: [Понимание процесса сборки](../how-it-works)