TanStack Router

Use @better-translate/tanstack-router cuando tu aplicación usa TanStack Router o TanStack Start y quieres URLs consciente de la localización.

En la mayoría de las aplicaciones reales lo combinarás con:

@better-translate/core para el traductor
@better-translate/react para los hooks dentro de los componentes React

1. Instala los paquetes

npm install @better-translate/core @better-translate/react @better-translate/tanstack-router

2. Crea el traductor compartido

Crea src/lib/i18n.ts:

1import { configureTranslations } from "@better-translate/core";23const en = {4  home: {5    title: "Hello from TanStack Router",6  },7} as const;89const es = {10  home: {11    title: "Hola desde TanStack Router",12  },13} as const;1415export const translator = await configureTranslations({16  availableLocales: ["en", "es"] as const,17  defaultLocale: "en",18  fallbackLocale: "en",19  messages: { en, es },20});

3. Agrega la configuración de enrutamiento de localización

Crea src/lib/routing.ts:

1import { defineRouting } from "@better-translate/tanstack-router";23export const routing = defineRouting({4  defaultLocale: "en",5  locales: ["en", "es"] as const,6  routeTemplate: "/{$lang}",7});

4. Crea helpers de navegación localizados

Crea src/lib/navigation.tsx:

tsx

1import {2  Link,3  useLocation,4  useNavigate,5  useParams,6  useRouter,7} from "@tanstack/react-router";89import { createNavigationFunctions } from "@better-translate/tanstack-router/navigation";1011import { routing } from "./routing";1213export const {14  Link: I18nLink,15  useLocale,16  useNavigate: useI18nNavigate,17  usePathname: useI18nPathname,18} = createNavigationFunctions({19  Link,20  routing,21  useLocation,22  useNavigate,23  useParams,24  useRouter,25});

5. Envuelve la aplicación con el proveedor de React

Crea src/app.tsx:

tsx

1import { RouterProvider } from "@tanstack/react-router";23import { BetterTranslateProvider } from "@better-translate/react";45import { router } from "./router";6import { translator } from "./lib/i18n";78export function App() {9  return (10    <BetterTranslateProvider translator={translator}>11      <RouterProvider router={router} />12    </BetterTranslateProvider>13  );14}

6. Usa links y traducciones consciente de la localización

Crea src/components/header.tsx:

tsx

1import { useTranslations } from "@better-translate/react";23import { translator } from "../lib/i18n";4import { I18nLink, useLocale } from "../lib/navigation";56export function Header() {7  const currentLocale = useLocale();8  const { t } = useTranslations<typeof translator>();910  return (11    <header>12      <h1>{t("home.title")}</h1>13      <I18nLink to="/" params={{ lang: currentLocale }}>14        Home15      </I18nLink>16    </header>17  );18}

TanStack Start

Si estás usando TanStack Start, mantén la misma configuración de enrutamiento y navegación. Luego agrega los helpers del servidor de @better-translate/tanstack-router/server para derivar la configuración por solicitud, fijar el locale activo al inicio y leer traducciones dentro de loaders o funciones del servidor.

1import { configureTranslations } from "@better-translate/core";2import {3  createServerHelpers,4  getRequestConfig,5  setRequestLocale,6} from "@better-translate/tanstack-router/server";7import { createServerFn } from "@tanstack/react-start";8import { getRequest } from "@tanstack/react-start/server";910import { en } from "./messages/en";11import { es } from "./messages/es";12import { routing, type AppLocale } from "./routing";1314export const requestConfig = getRequestConfig(async () => {15  const request = getRequest();16  const pathname = new URL(request.url).pathname;17  const locale = pathname.startsWith("/es") ? "es" : routing.defaultLocale;1819  return {20    locale,21    translator: await configureTranslations({22      availableLocales: routing.locales,23      defaultLocale: routing.defaultLocale,24      fallbackLocale: routing.defaultLocale,25      messages: { en, es },26    }),27  };28});2930const { getTranslations } = createServerHelpers(requestConfig);3132export const getHomeCopy = createServerFn({ method: "GET" })33  .handler(async () => {34    const locale = (await requestConfig()).locale as AppLocale;3536    setRequestLocale(locale);37    const t = await getTranslations({ locale });3839    return {40      title: t("home.title"),41    };42  });

Genera archivos de localización automáticamente

En lugar de escribir cada traducción a mano, usa la CLI para extraer cadenas y generar archivos de localización: Guía de CLI

Ejemplos

tanstack-start-example