FUNSTACK 路由器

一个现代反应路由器建在 导航 API。 。 。 .

特征

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

安装

npm install @funstack/router

AI 编码代理支持

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

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 技能数字 :

npx skills add uhyo/funstack-router

发展

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

# 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 - 文件网址

快速启动

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. 工作,包括:

• API 参考 - 部件、车钩、公用事业和类型
• 学习 - 嵌入路线、类型安全、安全部门改革、登记册系统控制等指南

路径模式

乐趣 路由器使用 URLPetern API 软件 用于路径匹配.

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

许可证

麻省理工学院