# tanstack-start: 概述 URL: https://generaltranslation.com/zh/docs/tanstack-start/introduction.mdx --- title: 概述 description: General Translation 的 TanStack Start SDK 介绍 --- ## 简介 `gt-tanstack-start` 是一个面向 [TanStack Start](https://tanstack.com/start) 应用的开源国际化 (i18n) 集成。它将 [`gt-next`](/docs/next) 的开发者体验带到了 TanStack Start 框架中——只需用 `` 包裹内容，即可自动完成翻译。它基于 [`gt-react`](/docs/react) 构建，并增加了 TanStack Start 特有的功能，例如同构区域设置检测和 root loader 集成。 **实验性：** `gt-tanstack-start` 仍在积极开发中。API 可能会在次要版本之间发生变化。目前尚不建议用于生产环境。 ## 工作方式在 root 路由中使用 [`initializeGT()`](#initialization-with-initializegt) 进行初始化在 [root loader](#root-loader) 中加载译文使用 [``](#the-gtprovider-component) 包装应用使用 [``](#the-t-component) 翻译内容 ## 使用 `initializeGT` 初始化 `initializeGT()` 函数用于配置 i18n 管理器。请在 root 路由文件的顶部调用它： ```tsx title="src/routes/__root.tsx" import { initializeGT } from 'gt-tanstack-start' import gtConfig from '../../gt.config.json' import loadTranslations from '../../loadTranslations' initializeGT({ ...gtConfig, loadTranslations, }) ``` ## root loader 在 root 路由的 loader 中使用 `getTranslations()` 和 `getLocale()`，来获取当前请求对应的正确译文： ```tsx title="src/routes/__root.tsx" import { getTranslations, getLocale } from 'gt-tanstack-start' export const Route = createRootRoute({ loader: async () => { return { translations: await getTranslations(), locale: getLocale(), } }, // ... }) ``` ## `` 组件 `` 会为所有子组件提供翻译上下文。从 loader 传入译文和区域设置： ```tsx title="src/routes/__root.tsx" import { GTProvider } from 'gt-tanstack-start' function RootDocument({ children }: { children: React.ReactNode }) { const { translations, locale } = Route.useLoaderData() return ( {children} ) } ``` ## `` 组件 [``](/docs/react/api/components/t) 组件用于翻译 JSX 内容。将任意元素包裹在其中，它们就会以用户的语言进行 render： ```tsx import { T } from 'gt-react' function Welcome() { return (

Welcome to our app!

This content is automatically translated.

) } ``` 请从 `gt-react` 导入 ``，不要从 `gt-tanstack-start` 导入。这样可以确保 `gt` CLI 在生成翻译文件时检测到你的可翻译内容。 ## 区域设置选择器添加一个 ``，让用户切换语言： ```tsx import { LocaleSelector } from 'gt-tanstack-start' function Nav() { return ( ) } ``` *** ## 下一步 * 按照[快速入门指南](/docs/tanstack-start)设置项目 * 浏览[示例应用](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic) * 了解 ``、`` 和 `` 等[变量组件](/docs/react/guides/variables)