# General Translation React SDKs (gt-react, gt-next): Configura TanStack Start URL: https://generaltranslation.com/es/docs/react/tanstack-start/setup.mdx --- title: Configura TanStack Start description: Inicializa General Translation en una app de TanStack Start, resuelve la configuración regional e hidrata el proveedor desde la ruta raíz. --- `gt-tanstack-start` se configura por completo en la ruta raíz. Llamas a [`initializeGT`](/docs/node/reference/functions/initialize-gt) a nivel de módulo, resuelves la configuración regional de la solicitud con `parseLocale`, cargas una instantánea de traducciones en el loader de la ruta y se los pasas a [``](/docs/react/reference/components/gt-provider). Como TanStack Start renderiza en el servidor, el proveedor necesita la configuración regional y las traducciones desde el principio, así que este patrón las hidrata desde el loader. Esta página explica la configuración específica de TanStack Start. Para ver el proceso completo, incluida la instalación y la CLI, sigue la [Quickstart de TanStack Start](/docs/react/tanstack-start-quickstart). *Advertencia: `gt-tanstack-start` es experimental y puede introducir cambios incompatibles.* ## Cargar traducciones [#load-translations] Crea una función [`loadTranslations`](/docs/react/reference/functions/load-translations) que importe el archivo de traducción correspondiente a una configuración regional. Mantén los archivos dentro de `src/` para que Vite pueda importarlos. ```ts title="loadTranslations.ts" export default async function loadTranslations(locale: string) { const translations = await import(`./src/_gt/${locale}.json`); return translations.default; } ``` La CLI genera estos archivos al ejecutar `npx gt translate`. ## Inicializa y resuelve la configuración regional [#initialize] `initializeGT`, `parseLocale` y [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) se importan desde `gt-tanstack-start`: * **`initializeGT`** — llámalo una vez en el nivel de módulo de la ruta raíz. Expande tu `gt.config.json` y pasa `loadTranslations`. * **`parseLocale`** — lee la configuración regional desde la cookie de la solicitud y la cabecera `Accept-Language` en el servidor, y desde la cookie en el navegador. Vuelve a guardar la configuración regional resuelta en la cookie. * **`getTranslationsSnapshot`** — carga las traducciones de una configuración regional con el formato que espera ``, para que el contenido se renderice sin un parpadeo de carga. Consulta la [referencia](/docs/react/reference/functions/get-translations-snapshot). ## Configura la ruta raíz [#root-route] En `src/routes/__root.tsx`, inicializa a nivel de módulo, resuelve la configuración regional y carga la instantánea en el loader; después, pasa `locale` y `translations` a `` en el componente shell. ```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'; // Inicializar General Translation una vez, a nivel de módulo 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} ); } ``` `` requiere aquí tanto `locale` como `translations`, a diferencia de Next.js, donde el servidor los resuelve, o de React Native, donde el proveedor los carga por sí solo. ## Marca el contenido para traducir [#content] En los componentes de tus rutas, envuelve el JSX en [``](/docs/react/reference/components/t) y traduce cadenas con [`useGT`](/docs/react/reference/hooks/use-gt). Impórtalos desde `gt-react` para que la CLI los detecte al analizar el código fuente. ```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.

); } ```