@btst/yar(Yet Another 路由器)
一个简单的,类型安全的路由器,用于React,它与任何框架一起工作.
为什么用这个?
- ✨ 超级简单 - 一个小小的API:
createRoute财务报告和审定财务报表createRouter(加上可选)defineRoute编号 :defineRoutes糖类) - 🔒 类型安全 - TypeScript 自动知道您的路径参数
- 🎯 弹性 - 使用任何反应框架
- ✅ 已验证 - 内建查询参数验证
安装
npm install @btst/yar
# or
pnpm add @btst/yar
快速启动
以下是一个完整的例子,显示了所有特征:
import { createRoute, createRouter } from "@btst/yar";
import { z } from "zod"; // or any Standard Schema library
import HomePage from "./pages/home";
import BlogPostPage from "./pages/blog-post";
// 1️⃣ Simple route - just a page
const homeRoute = createRoute(
"/",
() => ({
PageComponent: HomePage,
meta: () => [{ name: "title", content: "Home" }],
}),
undefined,
{ isStatic: true } // 🏷️ Optional: tag routes for filtering for SSG environments
);
// 2️⃣ Dynamic route - with params, validation, and data loading
const blogRoute = createRoute(
"/blog/:slug", // :slug becomes available as params.slug
({ params, query }) => ({
PageComponent: BlogPostPage,
// 📦 Load data (can use AbortSignal, options, etc.)
loader: async (signal?: AbortSignal) => {
const res = await fetch(`/api/posts/${params.slug}`, { signal });
return res.json();
},
// 📄 Generate meta tags (can use loader data)
meta: (post) => [
{ name: "title", content: post.title },
{ name: "description", content: post.excerpt },
],
// 🎨 Extra data for anything (breadcrumbs, layout, etc.)
extra: () => ({
breadcrumbs: ["Home", "Blog", params.slug],
layout: "blog",
}),
}),
{
// ✅ Validate query parameters
query: z.object({
preview: z.boolean().optional(),
}),
},
{ isStatic: false, requiresAuth: false } // 🏷️ Route tags
);
// 3️⃣ Create router
const router = createRouter({
home: homeRoute,
blog: blogRoute,
});
// 4️⃣ Use the router in your app
async function handleRequest(url: string) {
const route = router.getRoute(url);
if (!route) {
return <NotFoundPage />;
}
// Everything is typed! TypeScript knows the types of all params
const data = route.loader ? await route.loader() : null;
const metaTags = route.meta ? route.meta(data) : [];
const extras = route.extra ? route.extra() : null;
return (
<route.PageComponent
params={route.params}
data={data}
/>
);
}
// 5️⃣ Filter routes without running handlers (great for SSG!)
const staticRoutes = Object.values(router.routes)
.filter(route => route.meta?.isStatic);
申报路线(小锅炉板)
如果你不需要每条路线的定制关闭, defineRoute 财务报告和审定财务报表 defineRoutes 完全删除处理器接线 。 组件接收路由上下文( Q)params, (中文(简体) ), query作为道具,和 loader编号 :meta编号 :extra 这是他们的第一个论点:
import { defineRoute, defineRoutes, createRouter } from "@btst/yar";
// Single route
const postRoute = defineRoute("/blog/:slug", {
page: BlogPostPage, // rendered with { params, query } as props
loading: Spinner,
error: ErrorPage,
loader: (ctx, signal?: AbortSignal) =>
fetch(`/api/posts/${ctx.params.slug}`, { signal }).then((r) => r.json()),
meta: (ctx, post) => [{ name: "title", content: post?.title ?? ctx.params.slug }],
extra: (ctx) => ({ breadcrumbs: ["Home", "Blog", ctx.params.slug] }),
});
// Many routes at once, with optional page overrides
const routes = defineRoutes(
{
home: defineRoute("/", { page: HomePage }, undefined, { isStatic: true }),
post: defineRoute("/blog/:slug", {
page: BlogPostPage,
loader: (ctx) => fetchPost(ctx.params.slug),
meta: (ctx) => [{ name: "title", content: ctx.params.slug }],
}),
},
{ pages: { post: CustomPostPage } } // swap a page component per key
);
const router = createRouter(routes);
被覆盖的页面仍然收到路由上下文(params, (中文(简体) ), query作为道具. defineRoutes 也接受平面 createRoute 路径; 在这些互换中 PageComponent 现为.
defineRoute 返回正则路径,因此它可以自由编曲 createRoute 相同路径 createRouter 电话 使用 createRoute 当需要完全控制处理器关闭时; 使用 defineRoute编号 :defineRoutes 通常的申报案件.
你需要知道的东西
createRoute(path, handler, options?, routeMeta?)
创建路径。 处理器返回 :
PageComponent- 您的反应组件loader()- 装入数据(可以接受像AbortSignal(中文(简体) )meta()- 生成 SEO 标记(可以接受任何参数)extra()- 你需要的任何额外数据(可接受任何参数)
4 参数 routeMeta 允许您标记过滤的路由( 例如 ), { isStatic: true }) (中文(简体) ).
createRouter(routes)
结合你的路线。 回返情况:
routes- 所有路线getRoute(path, query?)- 匹配一个URL并获得路径
关键特性
QQ 路径参数
"/blog/:slug" → params.slug is automatically typed
QQ 查询验证
query: z.object({ sort: z.string() })
XQ 路由标记
{ isStatic: true, requiresAuth: false }
// Filter without running handlers - perfect for finding static routes in SSG environments, or for filtering routes that require authentication.
* 弹性函数
loader: (signal) => fetch(url, { signal })
meta: (data) => [{ name: "title", content: data.title }]
extra: (userId) => ({ breadcrumbs: [...], userId })
在 SSR 环境中用于预选数据并生成元标记, 或者用于在您的路径中添加额外数据 .
捐款
欢迎捐款! 请随意提交拉力请求.
许可证
麻省理工学院