# @atlaskit/teams-app-internal-navigation 中文文档

规范地址：https://npmcn.com/package/%40atlaskit/teams-app-internal-navigation/

版本：3\.1\.0
npm 元数据更新时间：2026-10-13T08:27:45.672Z
中文译文更新时间：2026-11-07T03:01:56.804Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40atlaskit/teams-app-internal-navigation
原文对照：https://npmcn.com/package/%40atlaskit/teams-app-internal-navigation/?lang=original
项目主页：https://bitbucket.org/atlassian/atlassian-frontend-monorepo#readme
源码仓库：https://bitbucket.org/atlassian/atlassian-frontend-monorepo

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：155 kB，121 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：react ^18\.2\.0 \|\| ^19\.2\.0
- 首次发布：2026-03-17T01:01:58.915Z
- 最新版本发布：2026-10-13T08:27:45.208Z
- 近 30 天下载量：25523（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 35 个）

## 中文简介

使用无头导航系统,用于整个团队的应用程序保持内部联系.

## 安装

```sh
npm install @atlaskit/teams-app-internal-navigation
```

也可以使用：`pnpm add @atlaskit/teams-app-internal-navigation`、`yarn add @atlaskit/teams-app-internal-navigation`、`bun add @atlaskit/teams-app-internal-navigation`

## README

# @atlaskit/团队-app-内部导航

Teams和People & Teams平台的无头导航设施和薄UI包装 软件包。 确保各团队应用程序和嵌入的内部和外部链接保持一致 人/队相出出.

## 使用量

### 基本用途

包装您的应用程序 `TeamsNavigationProvider` 并直接使用链接组件:

```tsx
import { TeamsNavigationProvider } from '@atlaskit/teams-app-internal-navigation/teams-navigation-provider';
import { TeamsAnchor } from '@atlaskit/teams-app-internal-navigation/teams-anchor';

function MyComponent() {
    return (
        <TeamsNavigationProvider value={{ navigate: pushRoute }}>
            <TeamsAnchor href="/teams/my-team" intent="navigation">
                My team
            </TeamsAnchor>
        </TeamsNavigationProvider>
    );
}
```

一个完整的示例 `TeamsLink`, (中文(简体) ), `TeamsLinkItem` 财务报告和审定财务报表 `TeamsLinkButton` 进入 [`examples/basic.tsx`](https://npmcn.com/package/%40atlaskit/teams-app-internal-navigation/examples/basic.tsx)。 。 。 .

### 无头 API

使用 `getNavigationProps` 当您需要将导航行为写入自定义标记或 非ADS组件 :

```ts
import { getNavigationProps } from '@atlaskit/teams-app-internal-navigation/get-navigation-props';
```

它回来了 `href`, (中文(简体) ), `target`, (中文(简体) ), `rel` 和成员名单 `onClick` 从一个 `href`意图, `NavigationContext` 和可选 `onClick`。 。 。 .

## 特征

### 导航意向

每个链接宣布 **意图** 控制浏览器或应用程序如何处理导航:

-   **`navigation`**: 在Atlassian应用程序内部或之间移动
-   **`reference`**: 文档、支持或参考类 URL
-   **`action`**: 设置所需道具时可能打开预览面板的内在流
-   **`external`**:第三方或明确外部目的地
-   **`unknown`**: 意向通过 URL 自动推断 `classifyNavigationIntent`

自动分类考虑相对相对于绝对 URL,非 HTTP 方案(`mailto:`, (中文(简体) ), `tel:`, (中文(简体) ), )和Atlassian管理的主机(包括FedRAMP和孤立云处理).

### 导航背景

`TeamsAnchor`, (中文(简体) ), `TeamsLink`, (中文(简体) ), `TeamsLinkButton` 财务报告和审定财务报表 `TeamsLinkItem` 全部从 `NavigationContext` 通过反应上下文. 提供者接受:

-   **`navigate(url)`**:设定后,用于SPA型导航. 省略时,浏览器处理 导航(如全页载荷).
-   **`openPreviewPanel(props)`**:可选召回. 对于 `action` 意图,左键可打开 预览面板而非导航 .
-   **`forceExternalIntent`**: 当 `true`,链接表现为外部打开(例如新标签),即使 否则,该 URL 将被视为在应用中导航,在预览面板内有用.

## 软件包导出

主条目 `@atlaskit/teams-app-internal-navigation` 出口 `TeamsAnchor`, (中文(简体) ), `TeamsNavigationProvider` 财务报告和审定财务报表 `useTeamsNavigationContext`。 。 。 .

| 子路径 | 出口 |
| --- | --- |
| `/teams-anchor` | `TeamsAnchor` (包装ADS) `Anchor`(中文(简体) ) |
| `/teams-link` | `TeamsLink` (包装ADS) `Link`(中文(简体) ) |
| `/teams-link-button` | `TeamsLinkButton` (包装ADS) `LinkButton`(中文(简体) ) |
| `/teams-link-item` | `TeamsLinkItem` (包装ADS) `LinkItem`(中文(简体) ) |
| `/teams-navigation-provider` | `TeamsNavigationProvider`, (中文(简体) ), `useTeamsNavigationContext` |
| `/get-navigation-props` | `getNavigationProps`, (中文(简体) ), `NavigationContext`, (中文(简体) ), `NavigationIntent`, (中文(简体) ), `NavigationIntentProps` |

## 常见问题

### @atlaskit/teams-app-internal-navigation 是什么？

使用无头导航系统,用于整个团队的应用程序保持内部联系\.

### 如何安装 @atlaskit/teams-app-internal-navigation？

在项目目录运行 npm install @atlaskit/teams-app-internal-navigation，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.2\.0 \|\| ^19\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @atlaskit/teams-app-internal-navigation 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @atlaskit/teams-app-internal-navigation 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @atlaskit/teams-app-internal-navigation 可以商用吗？

@atlaskit/teams-app-internal-navigation 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @atlaskit/teams-app-internal-navigation 的下载量有多少？

根据 npm 官方下载统计，@atlaskit/teams-app-internal-navigation 在 2026/10/07 – 2026/11/05 这 30 天内被下载 25,523 次，日均约 851 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @atlaskit/teams-app-internal-navigation 还在维护吗？

最新版本 3\.1\.0 发布于 2026/10/13（25 天前）；至今共发布 35 个版本，其中过去 12 个月发布了 35 个；首次发布于 2026/03/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。