# General Translation React SDKs (gt-react, gt-next): getTranslationsSnapshot
URL: https://generaltranslation.com/zh/docs/react/reference/functions/get-translations-snapshot.mdx
---

title: getTranslationsSnapshot
description: 为 General Translation 的 gt-react provider 加载指定区域设置的翻译数据。getTranslationsSnapshot 的 API 参考。

---

`getTranslationsSnapshot` 函数会按 [`<GTProvider>`](/docs/react/reference/components/gt-provider) 的 `translations` prop 所需的格式加载某个区域设置的翻译。请在初始化完成后调用它，以生成供 provider 同步使用的快照。

*可用于 `gt-react`、`gt-next`、`gt-tanstack-start` 和 `gt-react-native`。示例从 `gt-react` 导入；请改为从你的框架对应的包中导入。*

## 概览 [#overview]

[初始化](/docs/react/reference/config#initialization) `gt-react` 后，等待当前区域设置的 `getTranslationsSnapshot` 返回结果，并将其传递给 provider。

```tsx
const translations = await getTranslationsSnapshot(locale);
```

*注意：请在 [`initializeGT`](/docs/react/reference/config#initialize) 或 [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) 之后调用 `getTranslationsSnapshot`，因为这两个函数会填充它要读取的翻译缓存。*

## 工作原理 [#how-it-works]

初始化会将翻译加载到缓存中；`getTranslationsSnapshot` 会返回某个区域设置下缓存翻译的可序列化快照。将此快照传递给 [`<GTProvider>`](/docs/react/reference/components/gt-provider) 后，已翻译内容即可同步渲染，不会出现加载闪烁。

## 参数 [#parameters]

| 参数                  | 描述          | 类型       | 可选 | 默认值 |
| ------------------- | ----------- | -------- | -- | --- |
| [`locale`](#locale) | 要加载翻译的区域设置。 | `string` | 否  | —   |

### `locale` [#locale]

**类型** `string` · **必填**

要加载其翻译内容的区域设置，使用 BCP 47 代码表示。

## 返回 [#returns]

**类型** `Promise<Record<Locale, Record<Hash, Translation>>>`

一个 Promise，解析为该区域设置的翻译快照，其结构符合 `<GTProvider>` 的 `translations` prop 所需的格式。

## 示例 [#examples]

```tsx title="src/routes/root.tsx"
import {
  GTProvider,
  initializeGT,
  getTranslationsSnapshot,
  parseLocale,
} from 'gt-react';
import gtConfig from '../../gt.config.json';

const loadTranslations = (locale: string) =>
  import(`../_gt/${locale}.json`).then((m) => m.default);

initializeGT({ ...gtConfig, loadTranslations });

export async function loadRoot(request: Request) {
  const locale = parseLocale(request);
  return {
    locale,
    translations: await getTranslationsSnapshot(locale), // [!code highlight]
  };
}

export function Root({ locale, translations, children }) {
  return (
    <GTProvider locale={locale} translations={translations}>
      {children}
    </GTProvider>
  );
}
```

## 注意事项 [#notes]

* 完成初始化后调用 `getTranslationsSnapshot`。
* 将其结果传给 [`<GTProvider>`](/docs/react/reference/components/gt-provider) 的 `translations` prop。