# TanStack 启动 TanStack Start 是一个基于 TanStack Router + Vite + Nitro 构建的全栈 React 框架。它提供基于文件的路由、服务器功能 (RPC)、SSR/SPA/静态模式，并可部署在任何地方（Cloudflare、Netlify、Vercel、Node、Bun）。 ## 核心 API 快速参考应用程序接口 |目的 ---|--- `createFileRoute('/path')` |定义一个包含 loader、component、head 的路由 `createRootRoute()` / `createRootRouteWithContext()` |根部布局路线 `createRouter({routeTree, context })` |应用程序路由器实例 `createServerFn({ 方法: 'GET'|'POST' })` |仅限服务器的 RPC 功能 `createMiddleware()` |请求或函数中间件 `useSession()` |基于 Cookie 的服务器会话 `Route.useLoaderData()` |访问路由加载器返回值 `useNavigate()` |程序化导航 `<链接到=“/路径”>` |类型安全的导航链接 `redirect({ to, throw: true })` |重定向（放入 loader/beforeLoad 内） `notFound({ throw: true })` |触发404边界 ## 最小项目结构源代码/ 路线/ __root.tsx # 根布局（禁用 SSR 时的 shellComponent）索引.tsx # / about.tsx # /about 帖子/ $postId.tsx # /posts/:postId RouteTree.gen.ts # 自动生成（从不编辑） router.tsx # createRouter() 条目 client.tsx # 客户端入口 (StartClient) ssr.tsx # SSR 处理程序 app.config.ts # tanstackStart() vite 插件配置 ## 基于文件的路由关键约定 * 文件名中的 `.` → `/` 路径分隔符（例如，`posts.index.tsx` → `/posts/`） * `$param` → 动态段 * `_layout` → 无路径布局（无 URL 段） * `(group)` → 路由组（无 URL 影响） * `index.tsx` → 目录的索引路由 * `*.lazy.tsx` → 代码分割惰性路由 ## 核心依赖 { "@tanstack/react-start": "最新", "@tanstack/react-router": "最新", “反应”：“^19.0.0”， "vite": "^6.0.0", "vinxi": "最新" } ## 参考文献 * [文档 URL 映射]() — 通过 WebFetch 获取实时文档 * [项目设置]() — 脚手架、vite.config、tsconfig、router.tsx * [路由和导航]() — 文件约定、链接、挂钩 * [数据加载]() — 加载器、预加载、staleTime * [服务器功能]() — createServerFn、验证、错误 * [中间件]() — 请求/函数中间件、上下文、全局 * [服务器路由]() — API 路由、HTTP 处理程序、动态参数 * [执行模型]() - 同构代码，服务器/客户端边界 * [SSR 模式]() — 选择性 SSR、SPA、静态预渲染、ISR * [身份验证]() — 会话、路由保护、OAuth * [环境变量]() — VITE_ 前缀、.env、类型安全 * [导入保护]() — 服务器/客户端强制执行、标记 * [Tailwind 和样式]() — v4 设置、CSS 导入 * [SEO 和 Head]() — 元、OG、结构化数据、站点地图 * [托管和部署]() — Cloudflare、Netlify、Vercel * [错误处理]() — 边界、notFound、水合错误 * [React Query & tRPC]() — 集成模式 * [数据库模式]() — 数据库访问，推荐的提供程序

坦斯塔克开始

包含技能