TanStack Router

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

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});

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

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});

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}

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}

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";89import { en } from "./messages/en";10import { es } from "./messages/es";1112export const requestConfig = getRequestConfig(async () => ({13  locale: "en",14  translator: await configureTranslations({15    availableLocales: ["en", "es"] as const,16    defaultLocale: "en",17    fallbackLocale: "en",18    messages: { en, es },19  }),20}));2122const { getTranslations } = createServerHelpers(requestConfig);2324export const getHomeCopy = createServerFn({ method: "GET" }).handler(25  async () => {26    setRequestLocale("en");27    const t = await getTranslations({ locale: "en" });2829    return { title: t("home.title") };30  },31);