# 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
Docs index: https://generaltranslation.com/llms.txt
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 中，并通常刷新服务器组件树。启用区域设置路由后，从解析为非默认区域设置的 URL 切换到默认区域设置时，会重新加载文档，以便 middleware 移除区域设置前缀。已解析为默认区域设置的 URL 则只会刷新。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)。

## 版本历史 [#version-history]

| 版本      | 变更                                                             |
| ------- | -------------------------------------------------------------- |
| 11.1.16 | 在未带前缀或解析为默认区域设置的 App Router URL 中选择默认区域设置时，会刷新服务器组件，而不会重新加载文档。 |

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.