# General Translation React SDKs (gt-react, gt-next, gt-react-native): Démarrage rapide avec React Router
URL: https://generaltranslation.com/fr/docs/react/react-router-quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Ajoutez General Translation à une application React Router en mode framework, y compris les boutiques Shopify Hydrogen, et traduisez votre premier contenu.
`gt-react` fonctionne en mode framework de React Router par l’intermédiaire de votre route racine. Vous initialisez la bibliothèque dans `app/root.tsx`, résolvez le paramètre régional de chaque visiteur dans le loader racine, puis affichez [`GTProvider`](/docs/react/reference/components/gt-provider) depuis le `Layout` racine.
Utilisez ce démarrage rapide pour les applications créées avec `@react-router/dev`. Si vous utilisez React Router comme bibliothèque au sein d’une application monopage Vite, suivez plutôt le [Démarrage rapide pour une SPA React](/docs/react/react-spa-quickstart).
Exécutez [`npx gt@latest init`](/docs/cli/reference/commands/init) depuis la racine de l’application pour automatiser le setup. L’assistant installe `gt-react`, crée la configuration et le chargeur de traductions, et configure un fichier `app/root.tsx` issu du modèle de départ create-react-router ou Hydrogen. Il ne modifie pas les autres fichiers racine et répertorie les éventuelles actions manuelles à effectuer ; ce guide décrit ce même setup, réalisé manuellement.
*Remarque : ce setup nécessite `gt-react` 11.1.3 ou une version ultérieure, ainsi qu’une application dont le rendu s’effectue à chaque requête. Le mode SPA (`ssr: false`), le prérendu et le RSC Framework Mode ne sont pas pris en charge.*
## Démarrage rapide [#quickstart]
### 1. Installer les paquets
`gt-react` est la bibliothèque qui prend en charge les traductions dans votre application. `gt` est la CLI qui les génère.
```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. Créer `gt.config.json`
Créez un fichier `gt.config.json` à la racine de votre projet. Il définit votre langue source, vos paramètres régionaux cibles et l'emplacement où sont écrits les fichiers de traduction.
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "ja"],
"files": {
"gt": {
"output": "app/_gt/[locale].json"
}
}
}
```
* `defaultLocale` — la langue dans laquelle votre application est rédigée.
* `locales` — les langues cibles de la traduction. Choisissez-les parmi les [paramètres régionaux pris en charge](/docs/platform/dashboard/reference/supported-locales).
* `files.gt.output` — l'emplacement où la CLI écrit les fichiers de traduction. Placez-les dans `app/` pour que Vite les intègre aux bundles de votre code serveur et client.
### 3. Créer un chargeur de traductions
Créez `app/loadTranslations.ts`. Ce fichier importe le fichier de traduction d'un paramètre régional lorsque le loader racine en fait la requête.
```ts title="app/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
const translations = await import(`./_gt/${locale}.json`);
return translations.default;
}
```
Créez ensuite un fichier `{}` vide pour chaque locale cible, par exemple `app/_gt/es.json` et `app/_gt/ja.json` ; la commande [`gt init`](/docs/cli/reference/commands/init) les crée pour vous. Un paramètre régional sans fichier de traduction s’affiche dans votre langue par défaut.
### 4. Configurer la route racine
Appelez [`initializeGT`](/docs/react/reference/config#initialize) une seule fois au niveau du module dans `app/root.tsx`, renvoyez le paramètre régional et un instantané des traductions depuis le loader racine, puis encapsulez le contenu de `Layout` dans [`GTProvider`](/docs/react/reference/components/gt-provider). Ajoutez les lignes mises en évidence à votre route racine existante :
```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]
// Les pages d’erreur n’ont pas de données de loader. On n’y utilise donc pas GTProvider, afin qu’il ne
// remplace pas le paramètre régional enregistré du visiteur par celui par défaut.
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` lit le cookie de paramètre régional, puis l'en-tête `Accept-Language`, et se replie sur `defaultLocale` à défaut. Si votre route racine possède déjà un `loader`, ajoutez `locale` et `translations` à l'objet qu'il renvoie.
*Remarque : les pages d'erreur dépourvues de données du loader racine, comme une erreur 404 directe ou une erreur du loader racine, sont rendues sans [`GTProvider`](/docs/react/reference/components/gt-provider). Les composants de traduction et les hooks, tels que [``](/docs/react/reference/components/t) et [`useLocale`](/docs/react/reference/hooks/use-locale), y lèvent une exception et transforment la page d'erreur en erreur serveur : ne traduisez donc pas l'`ErrorBoundary` racine.*
### 5. Marquer le contenu à traduire
Encapsulez le JSX dans le composant [``](/docs/react/reference/components/t) pour le traduire sur place, et utilisez [`useGT`](/docs/react/reference/hooks/use-gt) pour les simples chaînes de caractères, comme les valeurs `aria-label`. Ajoutez un composant [``](/docs/react/reference/components/locale-selector) pour permettre aux visiteurs de changer de langue.
```tsx title="app/routes/home.tsx"
import { LocaleSelector, T, useGT } from 'gt-react';
export default function Home() {
const gt = useGT();
return (