# @funstack/router 中文文档

规范地址：https://npmcn.com/package/%40funstack/router/

版本：1\.6\.0
npm 元数据更新时间：2026-10-22T11:23:53.441Z
中文译文更新时间：2026-11-15T21:56:41.915Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40funstack/router
原文对照：https://npmcn.com/package/%40funstack/router/?lang=original
项目主页：https://router.funstack.work/
源码仓库：https://github.com/uhyo/funstack-router

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

- 包体积（解压后）：454 kB，37 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^19\.2\.0，react-dom ^19\.2\.0
- 首次发布：2025-12-10T15:32:22.271Z
- 最新版本发布：2026-10-22T11:23:52.613Z
- 近 30 天下载量：2197（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 25 个）

## 中文简介

基于导航 API 的现代反应路由器

## 安装

```sh
npm install @funstack/router
```

也可以使用：`pnpm add @funstack/router`、`yarn add @funstack/router`、`bun add @funstack/router`

## README

# FUNSTACK 路由器

![FUNSTACK Router](https://raw.githubusercontent.com/uhyo/funstack-router/master/docs/FUNSTACK_Router_Hero_small.png)

一个现代反应路由器建在 [导航 API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API)。 。 。 .

## 特征

-   : 白色 检查 标记 : **基于导航 API** - 使用现代导航API(由Chrome、Firefox和Safari 26.2+支持)
    -   **土著 `<a>` 标记只是工作** - 不特别 `<Link>` 需要组件; 使用标准的 HTML 链接
-   : 白色 检查 标记 : **[同步反应](https://github.com/reactwg/async-react) 兼容** - 导航是默认的转换
-   : 白色 检查 标记 : **RSC 兼容性** - 设计也与React服务器组件合作

## 安装

```bash
npm install @funstack/router
```

## AI 编码代理支持

`@funstack/router` 具有代理技能的舰只,可以给予你的编码助手(Claude Code, Cursor, GitHub Copilot等)关于路由器的API和最佳做法的知识. 运行 :

```bash
npx -p @funstack/router funstack-router-skill-installer
# or
pnpm dlx --package @funstack/router funstack-router-skill-installer
# or
yarn dlx -p @funstack/router funstack-router-skill-installer
```

安装器将引导您为您的首选 AI 代理设置技能 。 或者,如果你喜欢 [npx 技能](https://skills.sh/)数字 :

```bash
npx skills add uhyo/funstack-router
```

## 发展

这个是PNPM单曲 建立发展环境:

```bash
# Install dependencies
pnpm install

# Build the router package
pnpm build

# Run the example app
pnpm --filter funstack-router-example dev

# Run tests
pnpm test
```

### 软件包

-   `packages/router` -主电线 `@funstack/router` 图书馆
-   `packages/example` - 示例应用程序
-   `packages/docs` - 文件网址

## 快速启动

```tsx
import { Router, Outlet, route } from "@funstack/router";
import type { RouteDefinition, RouteComponentProps } from "@funstack/router";

function Layout() {
  return (
    <div>
      <nav>
        {/* Native <a> tags work for client-side navigation */}
        <a href="/">Home</a>
        <a href="/users">Users</a>
      </nav>
      <Outlet />
    </div>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function Users() {
  return <h1>Users</h1>;
}

function UserDetail({ params }: RouteComponentProps<{ id: string }>) {
  return <h1>User {params.id}</h1>;
}

const routes: RouteDefinition[] = [
  route({
    path: "/",
    component: Layout,
    children: [
      route({ path: "", component: Home }),
      route({ path: "users", component: Users }),
      route({ path: "users/:id", component: UserDetail }),
    ],
  }),
];

function App() {
  return <Router routes={routes} />;
}
```

## 文档

完整的文件可在 [路由器. funstack. 工作](https://router.funstack.work/),包括:

-   [API 参考](https://router.funstack.work/api) - 部件、车钩、公用事业和类型
-   [学习](https://router.funstack.work/learn) - 嵌入路线、类型安全、安全部门改革、登记册系统控制等指南

## 路径模式

乐趣 路由器使用 [URLPetern API 软件](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) 用于路径匹配.

| 图案 | 示例 | 匹配 |
| --- | --- | --- |
| `/users` | `/users` | 精确匹配 |
| `/users/:id` | `/users/123` | 命名参数 |
| `/docs/:section?` | `/docs`, (中文(简体) ), `/docs/intro` | 可选参数 |
| `/files/:path+` | `/files/a/b` | 重复参数(1个或更多) |
| `/users/:id(\d+)` | `/users/123` | 带正则克参数 |
| `/files/*` | `/files/a/b/c` | 通关卡 |

这些模式在母路径上也起作用:匹配的部分被作为前缀消耗,其余路径名与子路径相匹配.

## 许可证

麻省理工学院

## 常见问题

### @funstack/router 是什么？

基于导航 API 的现代反应路由器

### 如何安装 @funstack/router？

在项目目录运行 npm install @funstack/router，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.0）、react-dom（^19\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 funstack-router-skill-installer，可以用 npx funstack-router-skill-installer 直接运行。

### @funstack/router 支持 TypeScript 吗？

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

### @funstack/router 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @funstack/router 可以商用吗？

@funstack/router 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @funstack/router 的下载量有多少？

根据 npm 官方下载统计，@funstack/router 在 2026/10/16 – 2026/11/14 这 30 天内被下载 2,197 次，日均约 73 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @funstack/router 还在维护吗？

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