# General Translation React SDKs (gt-react, gt-next, gt-react-native): 本地化导航
URL: https://generaltranslation.com/zh/docs/react/nextjs/link.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 使用 General Translation 的符合区域设置的 Link 组件，在 Next.js 中直接跳转到本地化 App Router 路由。Link 的 API 参考。

`gt-next/link` 提供的 `<Link>` 组件封装了 Next.js 的 `<Link>`，并会在导航前为内部 App Router URL 添加区域设置前缀。这样在切换区域设置时可避免额外的 middleware 重定向。请参阅 [App Router middleware 设置](/docs/react/nextjs/app-router-middleware)。

*注意：Pages Router 应用应使用 `next/link` 或带有 Next.js `locale` 选项的 `next/router`。请参阅 [Pages Router 区域设置路由](/docs/react/nextjs/pages-router-middleware)。*

## 概览 [#overview]

从 `gt-next/link` 导入默认导出，并在 [`<GTProvider>`](/docs/react/reference/components/gt-provider) 内像使用 `next/link` 一样使用它。它接受相同的属性，并支持转发 ref。

```tsx title="app/nav.tsx"
import Link from 'gt-next/link';

export function Navigation() {
  return <Link href="/home">Home</Link>; // 法语访客对应 /fr/home
}
```

## `locale` 属性 [#locale-prop]

**类型** `string | false | undefined`

控制区域设置前缀：

* **省略** - 使用 [`useLocale`](/docs/react/reference/hooks/use-locale) 返回的当前区域设置。除非 `prefixDefaultLocale` 为 `true`，否则默认区域设置不会添加前缀。
* **区域设置字符串** - 直接链接到指定的区域设置，适用于语言切换器等场景。除非 `enableSmartRouting` 为 `false`，否则默认区域设置会保留前缀。
* **`false`** - 保持 href 不变

```tsx
import Link from 'gt-next/link';

// 当前区域设置（默认）：/fr/home；若为默认区域设置，则为 /home
<Link href="/home">Home</Link>;

// 显式区域设置：/fr/home
<Link href="/home" locale="fr">French</Link>;

// 无前缀：/legal
<Link href="/legal" locale={false}>Legal</Link>;
```

请传入未本地化的路径；如果 href 已包含区域设置，仍会被再次添加前缀。外部 URL 以及与 [`pathRegex`](/docs/react/nextjs/config#path-regex) 不匹配的路径保持不变。对于对象形式的 href，`<Link>` 只会本地化 `pathname`，其他字段均保持不变。

`<Link>` 会从 [`withGTConfig`](/docs/react/nextjs/config#routing) 中读取 `prefixDefaultLocale` 和 `enableSmartRouting`。如需在不渲染链接的情况下本地化路径 (例如用于 `router.push()`) ，请使用 [`useLocalizeHref`](/docs/react/nextjs/reference/hooks/use-localize-href)。

## Sitemap

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