# General Translation React SDKs (gt-react, gt-next, gt-react-native): useSetLocale
URL: https://generaltranslation.com/zh/docs/react/reference/hooks/use-set-locale.mdx
---
title: useSetLocale
description: 更改当前区域设置。useSetLocale API 参考。

---

`useSetLocale` 钩子会返回一个用于更改当前区域设置的函数。它仅限客户端使用。

*可用于 `gt-react`、`gt-next`、`gt-tanstack-start` 和 `gt-react-native`。*

## 概览 [#overview]

调用 `useSetLocale` 获取设置函数，然后传入区域设置代码进行调用。

*示例从 `gt-react` 导入；请改为从你的框架对应的软件包导入。*

```tsx
import { useSetLocale } from 'gt-react';

export default function LocaleButton() {
  const setLocale = useSetLocale();
  return <button onClick={() => setLocale('en')}>Set locale</button>;
}
```

*注意：`useSetLocale` 仅限客户端使用。*

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

调用返回的函数会通过当前框架保存并应用区域设置：

* React 默认将其保存到 cookie 中，并重新加载页面。
* Next.js App Router 将其保存到 cookie 中，并刷新服务器组件树。Pages Router 可以使用 Next.js 导航替代默认的页面重新加载。
* TanStack Start 将其保存到 cookie 中并重新加载页面；启用 [`localeRouting`](/docs/react/reference/config#locale-routing) 后，则会导航到对应的 pathname。
* React Native 将其保存到原生存储中，更新 provider 状态，加载翻译并重新渲染。

## 返回值 [#returns]

**类型** `(locale: string) => void`

用于将当前区域设置设为指定代码的函数。

## 注意事项 [#notes]

* `useSetLocale` 仅限客户端使用。
* 要读取当前区域设置，请使用 [`useLocale`](/docs/react/reference/hooks/use-locale)。如需现成的切换器，请使用 [`<LocaleSelector>`](/docs/react/reference/components/locale-selector)。