# General Translation React SDKs (gt-react, gt-next): 设置 TanStack Start URL: https://generaltranslation.com/zh/docs/react/tanstack-start/setup.mdx --- title: 设置 TanStack Start description: 在 TanStack Start 应用中初始化 General Translation，解析区域设置，并通过 root 路由为 provider 提供水合数据。 --- `gt-tanstack-start` 的配置全部在 root 路由中完成。你需要在模块级别调用 [`initializeGT`](/docs/node/reference/functions/initialize-gt)，使用 `parseLocale` 解析请求的区域设置，在路由加载器中加载翻译快照，并将两者传递给 [``](/docs/react/reference/components/gt-provider)。由于 TanStack Start 在服务器端渲染，provider 在一开始就需要区域设置和翻译，因此这种模式会先在加载器中准备好这些数据，再传给 provider 进行水合。本页介绍 TanStack Start 特有的配置。要了解包括安装和 CLI 在内的完整流程，请参阅 [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart)。 *警告：`gt-tanstack-start` 仍处于实验阶段，可能会有破坏性变更。* ## 加载翻译 [#load-translations] 创建一个 [`loadTranslations`](/docs/react/reference/functions/load-translations) 函数，用于导入某个区域设置的翻译文件。将这些文件保存在 `src/` 目录下，以便 Vite 可以导入它们。 ```ts title="loadTranslations.ts" export default async function loadTranslations(locale: string) { const translations = await import(`./src/_gt/${locale}.json`); return translations.default; } ``` 运行 `npx gt translate` 时，CLI 会生成这些文件。 ## 初始化并解析区域设置 [#initialize] `initializeGT`、`parseLocale` 和 [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) 都从 `gt-tanstack-start` 导入： * **`initializeGT`** — 在 root 路由的模块级别作用域中调用一次。展开你的 `gt.config.json`，并传入 `loadTranslations`。 * **`parseLocale`** — 在服务器端从请求的 cookie 和 `Accept-Language` header 中读取区域设置，在浏览器中则从 cookie 读取。它会将解析后的区域设置持久化回 cookie。 * **`getTranslationsSnapshot`** — 以 `` 所需的格式加载某个区域设置的翻译，这样内容渲染时就不会出现加载闪烁。参见[参考文档](/docs/react/reference/functions/get-translations-snapshot)。 ## 配置 root 路由 [#root-route] 在 `src/routes/__root.tsx` 中，在模块级别完成初始化，在加载器中解析区域设置并加载翻译快照，然后将 `locale` 和 `translations` 传给 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'; // 在模块级别初始化 General Translation，只执行一次 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} ); } ``` 这里的 `` 需要同时提供 `locale` 和 `translations`——这与 Next.js 不同，后者由服务器处理它们；也不同于 React Native，后者由 provider 自行加载它们。 ## 标记需翻译的内容 [#content] 在路由组件中，使用 [``](/docs/react/reference/components/t) 包裹 JSX，并通过 [`useGT`](/docs/react/reference/hooks/use-gt) 翻译字符串。请从 `gt-react` 导入它们，这样 CLI 在扫描源代码时才能识别到它们。 ```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.

); } ```