tanstack-router

# TanStack Router TypeScript 模式 TanStack Router 为路由、参数、搜索参数和加载器数据提供完整的类型安全。 ## 基础路由定义 typescript import { createRoute, createRootRoute } from '@tanstack/react-router'; // 根路由 const rootRoute = createRootRoute({ component: RootLayout, }); // 基础路由 const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: HomePage, }); // 路由树 const routeTree = rootRoute.addChildren([indexRoute]); // 路由器 const router = createRouter({ routeTree }); // 路由器类型 - 在应用中使用 type Router = typeof router; ## 带参数的路由 typescript import { createRoute } from '@tanstack/react-router'; import { useParams } from '@tanstack/react-router'; const userRoute = createRoute({ getParentRoute: () => rootRoute, path: '/users/$userId', component: UserPage, }); function UserPage() { const { userId } = useParams({ from: userRoute.id }); // userId 被定义为 string 类型 return ; } // 多参数 const postRoute = createRoute({ getParentRoute: () => rootRoute, path: '/users/$userId/posts/$postId', component: PostPage, }); function PostPage() { const { userId, postId } = useParams({ from: postRoute.id }); // 两者均被定义为 string 类型 return ; } ## 带验证的搜索参数 typescript import { z } from 'zod'; const productsRoute = createRoute({ getParentRoute: () => rootRoute, path: '/products', component: ProductsPage, validateSearch: z.object({ category: z.string().optional(), sortBy: z.enum(['price', 'name', 'rating']).default('name'), page: z.number().int().positive().default(1), perPage: z.number().int().positive().default(20), }), }); function ProductsPage() { const search = useSearch({ from: productsRoute.id }); // search 类型由 Zod 模式推断: // { // category?: string; // sortBy: 'price' | 'name' | 'rating'; // page: number; // perPage: number; // } return ( ); } ## 加载器数据 (Loader Data) typescript type User = { id: string; name: string; email: string; }; const userRoute = createRoute({ getParentRoute: () => rootRoute, path: '/users/$userId', component: UserPage, loader: async ({ params }) => { const user = await fetchUser(param