[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-router-core":3,"mdc-ev0ods-key":51,"related-repo-tanstack-router-core":1479,"related-org-tanstack-router-core":1582},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":46,"sourceUrl":49,"mdContent":50},"router-core","implement TanStack Router core routing logic","Framework-agnostic core concepts for TanStack Router: route trees, createRouter, createRoute, createRootRoute, createRootRouteWithContext, addChildren, Register type declaration, route matching, route sorting, file naming conventions. Entry point for all router skills.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"tanstack","TanStack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ftanstack.png",[12,16,19,22,23],{"name":13,"slug":14,"type":15},"TanStack Router","tanstack-router","tag",{"name":17,"slug":18,"type":15},"TypeScript","typescript",{"name":20,"slug":21,"type":15},"Routing","routing",{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},"Frontend","frontend",14787,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Frouter","2026-07-30T05:27:14.489611",null,1761,[32,33,34,35,36,37,21,38,39,40,41,42,43,44,18,45],"framework","fullstack","javascript","react","route","router","rpc","search","searchparams","server-functions","ssr","state-management","typesafe","url",{"repoUrl":27,"stars":26,"forks":30,"topics":47,"description":48},[32,33,34,35,36,37,21,38,39,40,41,42,43,44,18,45],"🤖 A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).","https:\u002F\u002Fgithub.com\u002FTanStack\u002Frouter\u002Ftree\u002FHEAD\u002Fpackages\u002Frouter-core\u002Fskills\u002Frouter-core","---\nname: router-core\ndescription: >-\n  Framework-agnostic core concepts for TanStack Router: route trees,\n  createRouter, createRoute, createRootRoute, createRootRouteWithContext,\n  addChildren, Register type declaration, route matching, route sorting,\n  file naming conventions. Entry point for all router skills.\nmetadata:\n  type: core\n  library: tanstack-router\n  library_version: '1.171.15'\n---\n\n# TanStack Router Core\n\nTanStack Router is a type-safe router for React and Solid with built-in SWR caching, JSON-first search params, file-based route generation, and end-to-end type inference. The core is framework-agnostic; React and Solid bindings layer on top.\n\n> **CRITICAL**: TanStack Router types are FULLY INFERRED. Never cast, never annotate inferred values. This is the #1 AI agent mistake.\n\n> **CRITICAL**: TanStack Router is CLIENT-FIRST. Loaders run on the client by default, NOT server-only like Remix\u002FNext.js. Do not confuse TanStack Router APIs with Next.js or React Router.\n\nUse this entry skill to choose one primary sub-skill. Do not load the full catalog. Load a second sub-skill only when the task crosses a real boundary, such as an authenticated loader that needs both `auth-and-guards` and `data-loading`.\n\n## Sub-Skills\n\n| Task                                               | Sub-Skill                                                                    |\n| -------------------------------------------------- | ---------------------------------------------------------------------------- |\n| Validate, read, write, transform search params     | [router-core\u002Fsearch-params\u002FSKILL.md](.\u002Fsearch-params\u002FSKILL.md)               |\n| Dynamic segments, splats, optional params          | [router-core\u002Fpath-params\u002FSKILL.md](.\u002Fpath-params\u002FSKILL.md)                   |\n| Link, useNavigate, preloading, blocking            | [router-core\u002Fnavigation\u002FSKILL.md](.\u002Fnavigation\u002FSKILL.md)                     |\n| Route loaders, SWR caching, context, deferred data | [router-core\u002Fdata-loading\u002FSKILL.md](.\u002Fdata-loading\u002FSKILL.md)                 |\n| Auth guards, RBAC, beforeLoad redirects            | [router-core\u002Fauth-and-guards\u002FSKILL.md](.\u002Fauth-and-guards\u002FSKILL.md)           |\n| Automatic and manual code splitting                | [router-core\u002Fcode-splitting\u002FSKILL.md](.\u002Fcode-splitting\u002FSKILL.md)             |\n| 404 handling, error boundaries, notFound()         | [router-core\u002Fnot-found-and-errors\u002FSKILL.md](.\u002Fnot-found-and-errors\u002FSKILL.md) |\n| Inference, Register, from narrowing, TS perf       | [router-core\u002Ftype-safety\u002FSKILL.md](.\u002Ftype-safety\u002FSKILL.md)                   |\n| Streaming\u002Fnon-streaming SSR, hydration, head mgmt  | [router-core\u002Fssr\u002FSKILL.md](.\u002Fssr\u002FSKILL.md)                                   |\n\n## Quick Decision Tree\n\n```\nNeed to add\u002Fread\u002Fwrite URL query parameters?\n  → router-core\u002Fsearch-params\n\nNeed dynamic URL segments like \u002Fposts\u002F$postId?\n  → router-core\u002Fpath-params\n\nNeed to create links or navigate programmatically?\n  → router-core\u002Fnavigation\n\nNeed to fetch data for a route?\n  Is it client-side only or client+server?\n    → router-core\u002Fdata-loading\n  Using TanStack Query as external cache?\n    → compositions\u002Frouter-query (separate skill)\n\nNeed to protect routes behind auth?\n  → router-core\u002Fauth-and-guards\n\nNeed to reduce bundle size per route?\n  → router-core\u002Fcode-splitting\n\nNeed custom 404 or error handling?\n  → router-core\u002Fnot-found-and-errors\n\nHaving TypeScript issues or performance problems?\n  → router-core\u002Ftype-safety\n\nNeed server-side rendering?\n  → router-core\u002Fssr\n```\n\n## Cross-Cutting Completion Checks\n\nFor route refactors:\n\n1. Rename or move the route file; do not hand-edit the generated `createFileRoute` path.\n2. Regenerate `routeTree.gen.ts` with the configured Router plugin or CLI.\n3. Update links, redirects, `from` narrowing, params, and tests that reference the old route.\n4. Run type tests and a production build. A typecheck alone does not prove route generation or bundling works.\n\nFor response schema changes:\n\n1. Update the source model and shared validation schema.\n2. Update the server function or API serializer so the field exists at runtime.\n3. Update loader and component consumers without casts.\n4. Assert the actual response payload in a unit or integration test. Typechecking cannot catch a serializer that omits the new field.\n\n## Minimal Working Example\n\n```tsx\n\u002F\u002F src\u002Froutes\u002F__root.tsx\nimport { createRootRoute, Outlet } from '@tanstack\u002Freact-router'\n\nexport const Route = createRootRoute({\n  component: () => \u003COutlet \u002F>,\n})\n```\n\n```tsx\n\u002F\u002F src\u002Froutes\u002Findex.tsx\nimport { createFileRoute } from '@tanstack\u002Freact-router'\n\nexport const Route = createFileRoute('\u002F')({\n  component: () => \u003Ch1>Home\u003C\u002Fh1>,\n})\n```\n\n```tsx\n\u002F\u002F src\u002Frouter.tsx\nimport { createRouter } from '@tanstack\u002Freact-router'\nimport { routeTree } from '.\u002FrouteTree.gen'\n\nconst router = createRouter({ routeTree })\n\n\u002F\u002F REQUIRED for type safety — without this, Link\u002FuseNavigate have no autocomplete\ndeclare module '@tanstack\u002Freact-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nexport default router\n```\n\n```tsx\n\u002F\u002F src\u002Fmain.tsx\nimport { RouterProvider } from '@tanstack\u002Freact-router'\nimport router from '.\u002Frouter'\n\nfunction App() {\n  return \u003CRouterProvider router={router} \u002F>\n}\n```\n\n## Common Mistakes\n\n### HIGH: createFileRoute path string must match the file path\n\nThe Vite plugin manages the path string in `createFileRoute`. Do not change it manually — it must match the file's location under `src\u002Froutes\u002F`:\n\n```tsx\n\u002F\u002F File: src\u002Froutes\u002Fposts\u002F$postId.tsx\nexport const Route = createFileRoute('\u002Fposts\u002F$postId')({\n  \u002F\u002F ✅ matches file path\n  component: PostPage,\n})\n\nexport const Route = createFileRoute('\u002Fpost\u002F$postId')({\n  \u002F\u002F ❌ silent mismatch\n  component: PostPage,\n})\n```\n\nThe plugin auto-generates this string. If you rename a route file, the plugin updates it. Never edit the path string by hand.\n\n## Version Note\n\nThis skill targets `@tanstack\u002Frouter-core` v1.171.15. Splat routes use `$` (not `*`); the `*` compat alias will be removed in v2.\n",{"data":52,"body":56},{"name":4,"description":6,"metadata":53},{"type":54,"library":14,"library_version":55},"core","1.171.15",{"type":57,"children":58},"root",[59,68,74,89,101,123,130,312,318,330,336,341,390,395,418,424,607,778,1047,1198,1204,1211,1230,1426,1431,1437,1473],{"type":60,"tag":61,"props":62,"children":64},"element","h1",{"id":63},"tanstack-router-core",[65],{"type":66,"value":67},"text","TanStack Router Core",{"type":60,"tag":69,"props":70,"children":71},"p",{},[72],{"type":66,"value":73},"TanStack Router is a type-safe router for React and Solid with built-in SWR caching, JSON-first search params, file-based route generation, and end-to-end type inference. The core is framework-agnostic; React and Solid bindings layer on top.",{"type":60,"tag":75,"props":76,"children":77},"blockquote",{},[78],{"type":60,"tag":69,"props":79,"children":80},{},[81,87],{"type":60,"tag":82,"props":83,"children":84},"strong",{},[85],{"type":66,"value":86},"CRITICAL",{"type":66,"value":88},": TanStack Router types are FULLY INFERRED. Never cast, never annotate inferred values. This is the #1 AI agent mistake.",{"type":60,"tag":75,"props":90,"children":91},{},[92],{"type":60,"tag":69,"props":93,"children":94},{},[95,99],{"type":60,"tag":82,"props":96,"children":97},{},[98],{"type":66,"value":86},{"type":66,"value":100},": TanStack Router is CLIENT-FIRST. Loaders run on the client by default, NOT server-only like Remix\u002FNext.js. Do not confuse TanStack Router APIs with Next.js or React Router.",{"type":60,"tag":69,"props":102,"children":103},{},[104,106,113,115,121],{"type":66,"value":105},"Use this entry skill to choose one primary sub-skill. Do not load the full catalog. Load a second sub-skill only when the task crosses a real boundary, such as an authenticated loader that needs both ",{"type":60,"tag":107,"props":108,"children":110},"code",{"className":109},[],[111],{"type":66,"value":112},"auth-and-guards",{"type":66,"value":114}," and ",{"type":60,"tag":107,"props":116,"children":118},{"className":117},[],[119],{"type":66,"value":120},"data-loading",{"type":66,"value":122},".",{"type":60,"tag":124,"props":125,"children":127},"h2",{"id":126},"sub-skills",[128],{"type":66,"value":129},"Sub-Skills",{"type":60,"tag":131,"props":132,"children":133},"table",{},[134,153],{"type":60,"tag":135,"props":136,"children":137},"thead",{},[138],{"type":60,"tag":139,"props":140,"children":141},"tr",{},[142,148],{"type":60,"tag":143,"props":144,"children":145},"th",{},[146],{"type":66,"value":147},"Task",{"type":60,"tag":143,"props":149,"children":150},{},[151],{"type":66,"value":152},"Sub-Skill",{"type":60,"tag":154,"props":155,"children":156},"tbody",{},[157,176,193,210,227,244,261,278,295],{"type":60,"tag":139,"props":158,"children":159},{},[160,166],{"type":60,"tag":161,"props":162,"children":163},"td",{},[164],{"type":66,"value":165},"Validate, read, write, transform search params",{"type":60,"tag":161,"props":167,"children":168},{},[169],{"type":60,"tag":170,"props":171,"children":173},"a",{"href":172},".\u002Fsearch-params\u002FSKILL.md",[174],{"type":66,"value":175},"router-core\u002Fsearch-params\u002FSKILL.md",{"type":60,"tag":139,"props":177,"children":178},{},[179,184],{"type":60,"tag":161,"props":180,"children":181},{},[182],{"type":66,"value":183},"Dynamic segments, splats, optional params",{"type":60,"tag":161,"props":185,"children":186},{},[187],{"type":60,"tag":170,"props":188,"children":190},{"href":189},".\u002Fpath-params\u002FSKILL.md",[191],{"type":66,"value":192},"router-core\u002Fpath-params\u002FSKILL.md",{"type":60,"tag":139,"props":194,"children":195},{},[196,201],{"type":60,"tag":161,"props":197,"children":198},{},[199],{"type":66,"value":200},"Link, useNavigate, preloading, blocking",{"type":60,"tag":161,"props":202,"children":203},{},[204],{"type":60,"tag":170,"props":205,"children":207},{"href":206},".\u002Fnavigation\u002FSKILL.md",[208],{"type":66,"value":209},"router-core\u002Fnavigation\u002FSKILL.md",{"type":60,"tag":139,"props":211,"children":212},{},[213,218],{"type":60,"tag":161,"props":214,"children":215},{},[216],{"type":66,"value":217},"Route loaders, SWR caching, context, deferred data",{"type":60,"tag":161,"props":219,"children":220},{},[221],{"type":60,"tag":170,"props":222,"children":224},{"href":223},".\u002Fdata-loading\u002FSKILL.md",[225],{"type":66,"value":226},"router-core\u002Fdata-loading\u002FSKILL.md",{"type":60,"tag":139,"props":228,"children":229},{},[230,235],{"type":60,"tag":161,"props":231,"children":232},{},[233],{"type":66,"value":234},"Auth guards, RBAC, beforeLoad redirects",{"type":60,"tag":161,"props":236,"children":237},{},[238],{"type":60,"tag":170,"props":239,"children":241},{"href":240},".\u002Fauth-and-guards\u002FSKILL.md",[242],{"type":66,"value":243},"router-core\u002Fauth-and-guards\u002FSKILL.md",{"type":60,"tag":139,"props":245,"children":246},{},[247,252],{"type":60,"tag":161,"props":248,"children":249},{},[250],{"type":66,"value":251},"Automatic and manual code splitting",{"type":60,"tag":161,"props":253,"children":254},{},[255],{"type":60,"tag":170,"props":256,"children":258},{"href":257},".\u002Fcode-splitting\u002FSKILL.md",[259],{"type":66,"value":260},"router-core\u002Fcode-splitting\u002FSKILL.md",{"type":60,"tag":139,"props":262,"children":263},{},[264,269],{"type":60,"tag":161,"props":265,"children":266},{},[267],{"type":66,"value":268},"404 handling, error boundaries, notFound()",{"type":60,"tag":161,"props":270,"children":271},{},[272],{"type":60,"tag":170,"props":273,"children":275},{"href":274},".\u002Fnot-found-and-errors\u002FSKILL.md",[276],{"type":66,"value":277},"router-core\u002Fnot-found-and-errors\u002FSKILL.md",{"type":60,"tag":139,"props":279,"children":280},{},[281,286],{"type":60,"tag":161,"props":282,"children":283},{},[284],{"type":66,"value":285},"Inference, Register, from narrowing, TS perf",{"type":60,"tag":161,"props":287,"children":288},{},[289],{"type":60,"tag":170,"props":290,"children":292},{"href":291},".\u002Ftype-safety\u002FSKILL.md",[293],{"type":66,"value":294},"router-core\u002Ftype-safety\u002FSKILL.md",{"type":60,"tag":139,"props":296,"children":297},{},[298,303],{"type":60,"tag":161,"props":299,"children":300},{},[301],{"type":66,"value":302},"Streaming\u002Fnon-streaming SSR, hydration, head mgmt",{"type":60,"tag":161,"props":304,"children":305},{},[306],{"type":60,"tag":170,"props":307,"children":309},{"href":308},".\u002Fssr\u002FSKILL.md",[310],{"type":66,"value":311},"router-core\u002Fssr\u002FSKILL.md",{"type":60,"tag":124,"props":313,"children":315},{"id":314},"quick-decision-tree",[316],{"type":66,"value":317},"Quick Decision Tree",{"type":60,"tag":319,"props":320,"children":324},"pre",{"className":321,"code":323,"language":66},[322],"language-text","Need to add\u002Fread\u002Fwrite URL query parameters?\n  → router-core\u002Fsearch-params\n\nNeed dynamic URL segments like \u002Fposts\u002F$postId?\n  → router-core\u002Fpath-params\n\nNeed to create links or navigate programmatically?\n  → router-core\u002Fnavigation\n\nNeed to fetch data for a route?\n  Is it client-side only or client+server?\n    → router-core\u002Fdata-loading\n  Using TanStack Query as external cache?\n    → compositions\u002Frouter-query (separate skill)\n\nNeed to protect routes behind auth?\n  → router-core\u002Fauth-and-guards\n\nNeed to reduce bundle size per route?\n  → router-core\u002Fcode-splitting\n\nNeed custom 404 or error handling?\n  → router-core\u002Fnot-found-and-errors\n\nHaving TypeScript issues or performance problems?\n  → router-core\u002Ftype-safety\n\nNeed server-side rendering?\n  → router-core\u002Fssr\n",[325],{"type":60,"tag":107,"props":326,"children":328},{"__ignoreMap":327},"",[329],{"type":66,"value":323},{"type":60,"tag":124,"props":331,"children":333},{"id":332},"cross-cutting-completion-checks",[334],{"type":66,"value":335},"Cross-Cutting Completion Checks",{"type":60,"tag":69,"props":337,"children":338},{},[339],{"type":66,"value":340},"For route refactors:",{"type":60,"tag":342,"props":343,"children":344},"ol",{},[345,359,372,385],{"type":60,"tag":346,"props":347,"children":348},"li",{},[349,351,357],{"type":66,"value":350},"Rename or move the route file; do not hand-edit the generated ",{"type":60,"tag":107,"props":352,"children":354},{"className":353},[],[355],{"type":66,"value":356},"createFileRoute",{"type":66,"value":358}," path.",{"type":60,"tag":346,"props":360,"children":361},{},[362,364,370],{"type":66,"value":363},"Regenerate ",{"type":60,"tag":107,"props":365,"children":367},{"className":366},[],[368],{"type":66,"value":369},"routeTree.gen.ts",{"type":66,"value":371}," with the configured Router plugin or CLI.",{"type":60,"tag":346,"props":373,"children":374},{},[375,377,383],{"type":66,"value":376},"Update links, redirects, ",{"type":60,"tag":107,"props":378,"children":380},{"className":379},[],[381],{"type":66,"value":382},"from",{"type":66,"value":384}," narrowing, params, and tests that reference the old route.",{"type":60,"tag":346,"props":386,"children":387},{},[388],{"type":66,"value":389},"Run type tests and a production build. A typecheck alone does not prove route generation or bundling works.",{"type":60,"tag":69,"props":391,"children":392},{},[393],{"type":66,"value":394},"For response schema changes:",{"type":60,"tag":342,"props":396,"children":397},{},[398,403,408,413],{"type":60,"tag":346,"props":399,"children":400},{},[401],{"type":66,"value":402},"Update the source model and shared validation schema.",{"type":60,"tag":346,"props":404,"children":405},{},[406],{"type":66,"value":407},"Update the server function or API serializer so the field exists at runtime.",{"type":60,"tag":346,"props":409,"children":410},{},[411],{"type":66,"value":412},"Update loader and component consumers without casts.",{"type":60,"tag":346,"props":414,"children":415},{},[416],{"type":66,"value":417},"Assert the actual response payload in a unit or integration test. Typechecking cannot catch a serializer that omits the new field.",{"type":60,"tag":124,"props":419,"children":421},{"id":420},"minimal-working-example",[422],{"type":66,"value":423},"Minimal Working Example",{"type":60,"tag":319,"props":425,"children":429},{"className":426,"code":427,"language":428,"meta":327,"style":327},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F src\u002Froutes\u002F__root.tsx\nimport { createRootRoute, Outlet } from '@tanstack\u002Freact-router'\n\nexport const Route = createRootRoute({\n  component: () => \u003COutlet \u002F>,\n})\n","tsx",[430],{"type":60,"tag":107,"props":431,"children":432},{"__ignoreMap":327},[433,445,503,513,553,593],{"type":60,"tag":434,"props":435,"children":438},"span",{"class":436,"line":437},"line",1,[439],{"type":60,"tag":434,"props":440,"children":442},{"style":441},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[443],{"type":66,"value":444},"\u002F\u002F src\u002Froutes\u002F__root.tsx\n",{"type":60,"tag":434,"props":446,"children":448},{"class":436,"line":447},2,[449,455,461,467,472,477,482,487,492,498],{"type":60,"tag":434,"props":450,"children":452},{"style":451},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[453],{"type":66,"value":454},"import",{"type":60,"tag":434,"props":456,"children":458},{"style":457},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[459],{"type":66,"value":460}," {",{"type":60,"tag":434,"props":462,"children":464},{"style":463},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[465],{"type":66,"value":466}," createRootRoute",{"type":60,"tag":434,"props":468,"children":469},{"style":457},[470],{"type":66,"value":471},",",{"type":60,"tag":434,"props":473,"children":474},{"style":463},[475],{"type":66,"value":476}," Outlet",{"type":60,"tag":434,"props":478,"children":479},{"style":457},[480],{"type":66,"value":481}," }",{"type":60,"tag":434,"props":483,"children":484},{"style":451},[485],{"type":66,"value":486}," from",{"type":60,"tag":434,"props":488,"children":489},{"style":457},[490],{"type":66,"value":491}," '",{"type":60,"tag":434,"props":493,"children":495},{"style":494},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[496],{"type":66,"value":497},"@tanstack\u002Freact-router",{"type":60,"tag":434,"props":499,"children":500},{"style":457},[501],{"type":66,"value":502},"'\n",{"type":60,"tag":434,"props":504,"children":506},{"class":436,"line":505},3,[507],{"type":60,"tag":434,"props":508,"children":510},{"emptyLinePlaceholder":509},true,[511],{"type":66,"value":512},"\n",{"type":60,"tag":434,"props":514,"children":516},{"class":436,"line":515},4,[517,522,528,533,538,543,548],{"type":60,"tag":434,"props":518,"children":519},{"style":451},[520],{"type":66,"value":521},"export",{"type":60,"tag":434,"props":523,"children":525},{"style":524},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[526],{"type":66,"value":527}," const",{"type":60,"tag":434,"props":529,"children":530},{"style":463},[531],{"type":66,"value":532}," Route ",{"type":60,"tag":434,"props":534,"children":535},{"style":457},[536],{"type":66,"value":537},"=",{"type":60,"tag":434,"props":539,"children":541},{"style":540},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[542],{"type":66,"value":466},{"type":60,"tag":434,"props":544,"children":545},{"style":463},[546],{"type":66,"value":547},"(",{"type":60,"tag":434,"props":549,"children":550},{"style":457},[551],{"type":66,"value":552},"{\n",{"type":60,"tag":434,"props":554,"children":556},{"class":436,"line":555},5,[557,562,567,572,577,582,588],{"type":60,"tag":434,"props":558,"children":559},{"style":540},[560],{"type":66,"value":561},"  component",{"type":60,"tag":434,"props":563,"children":564},{"style":457},[565],{"type":66,"value":566},":",{"type":60,"tag":434,"props":568,"children":569},{"style":457},[570],{"type":66,"value":571}," ()",{"type":60,"tag":434,"props":573,"children":574},{"style":524},[575],{"type":66,"value":576}," =>",{"type":60,"tag":434,"props":578,"children":579},{"style":457},[580],{"type":66,"value":581}," \u003C",{"type":60,"tag":434,"props":583,"children":585},{"style":584},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[586],{"type":66,"value":587},"Outlet",{"type":60,"tag":434,"props":589,"children":590},{"style":457},[591],{"type":66,"value":592}," \u002F>,\n",{"type":60,"tag":434,"props":594,"children":596},{"class":436,"line":595},6,[597,602],{"type":60,"tag":434,"props":598,"children":599},{"style":457},[600],{"type":66,"value":601},"}",{"type":60,"tag":434,"props":603,"children":604},{"style":463},[605],{"type":66,"value":606},")\n",{"type":60,"tag":319,"props":608,"children":610},{"className":426,"code":609,"language":428,"meta":327,"style":327},"\u002F\u002F src\u002Froutes\u002Findex.tsx\nimport { createFileRoute } from '@tanstack\u002Freact-router'\n\nexport const Route = createFileRoute('\u002F')({\n  component: () => \u003Ch1>Home\u003C\u002Fh1>,\n})\n",[611],{"type":60,"tag":107,"props":612,"children":613},{"__ignoreMap":327},[614,622,658,665,715,767],{"type":60,"tag":434,"props":615,"children":616},{"class":436,"line":437},[617],{"type":60,"tag":434,"props":618,"children":619},{"style":441},[620],{"type":66,"value":621},"\u002F\u002F src\u002Froutes\u002Findex.tsx\n",{"type":60,"tag":434,"props":623,"children":624},{"class":436,"line":447},[625,629,633,638,642,646,650,654],{"type":60,"tag":434,"props":626,"children":627},{"style":451},[628],{"type":66,"value":454},{"type":60,"tag":434,"props":630,"children":631},{"style":457},[632],{"type":66,"value":460},{"type":60,"tag":434,"props":634,"children":635},{"style":463},[636],{"type":66,"value":637}," createFileRoute",{"type":60,"tag":434,"props":639,"children":640},{"style":457},[641],{"type":66,"value":481},{"type":60,"tag":434,"props":643,"children":644},{"style":451},[645],{"type":66,"value":486},{"type":60,"tag":434,"props":647,"children":648},{"style":457},[649],{"type":66,"value":491},{"type":60,"tag":434,"props":651,"children":652},{"style":494},[653],{"type":66,"value":497},{"type":60,"tag":434,"props":655,"children":656},{"style":457},[657],{"type":66,"value":502},{"type":60,"tag":434,"props":659,"children":660},{"class":436,"line":505},[661],{"type":60,"tag":434,"props":662,"children":663},{"emptyLinePlaceholder":509},[664],{"type":66,"value":512},{"type":60,"tag":434,"props":666,"children":667},{"class":436,"line":515},[668,672,676,680,684,688,692,697,702,706,711],{"type":60,"tag":434,"props":669,"children":670},{"style":451},[671],{"type":66,"value":521},{"type":60,"tag":434,"props":673,"children":674},{"style":524},[675],{"type":66,"value":527},{"type":60,"tag":434,"props":677,"children":678},{"style":463},[679],{"type":66,"value":532},{"type":60,"tag":434,"props":681,"children":682},{"style":457},[683],{"type":66,"value":537},{"type":60,"tag":434,"props":685,"children":686},{"style":540},[687],{"type":66,"value":637},{"type":60,"tag":434,"props":689,"children":690},{"style":463},[691],{"type":66,"value":547},{"type":60,"tag":434,"props":693,"children":694},{"style":457},[695],{"type":66,"value":696},"'",{"type":60,"tag":434,"props":698,"children":699},{"style":494},[700],{"type":66,"value":701},"\u002F",{"type":60,"tag":434,"props":703,"children":704},{"style":457},[705],{"type":66,"value":696},{"type":60,"tag":434,"props":707,"children":708},{"style":463},[709],{"type":66,"value":710},")(",{"type":60,"tag":434,"props":712,"children":713},{"style":457},[714],{"type":66,"value":552},{"type":60,"tag":434,"props":716,"children":717},{"class":436,"line":555},[718,722,726,730,734,738,743,748,753,758,762],{"type":60,"tag":434,"props":719,"children":720},{"style":540},[721],{"type":66,"value":561},{"type":60,"tag":434,"props":723,"children":724},{"style":457},[725],{"type":66,"value":566},{"type":60,"tag":434,"props":727,"children":728},{"style":457},[729],{"type":66,"value":571},{"type":60,"tag":434,"props":731,"children":732},{"style":524},[733],{"type":66,"value":576},{"type":60,"tag":434,"props":735,"children":736},{"style":457},[737],{"type":66,"value":581},{"type":60,"tag":434,"props":739,"children":741},{"style":740},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[742],{"type":66,"value":61},{"type":60,"tag":434,"props":744,"children":745},{"style":457},[746],{"type":66,"value":747},">",{"type":60,"tag":434,"props":749,"children":750},{"style":463},[751],{"type":66,"value":752},"Home",{"type":60,"tag":434,"props":754,"children":755},{"style":457},[756],{"type":66,"value":757},"\u003C\u002F",{"type":60,"tag":434,"props":759,"children":760},{"style":740},[761],{"type":66,"value":61},{"type":60,"tag":434,"props":763,"children":764},{"style":457},[765],{"type":66,"value":766},">,\n",{"type":60,"tag":434,"props":768,"children":769},{"class":436,"line":595},[770,774],{"type":60,"tag":434,"props":771,"children":772},{"style":457},[773],{"type":66,"value":601},{"type":60,"tag":434,"props":775,"children":776},{"style":463},[777],{"type":66,"value":606},{"type":60,"tag":319,"props":779,"children":781},{"className":426,"code":780,"language":428,"meta":327,"style":327},"\u002F\u002F src\u002Frouter.tsx\nimport { createRouter } from '@tanstack\u002Freact-router'\nimport { routeTree } from '.\u002FrouteTree.gen'\n\nconst router = createRouter({ routeTree })\n\n\u002F\u002F REQUIRED for type safety — without this, Link\u002FuseNavigate have no autocomplete\ndeclare module '@tanstack\u002Freact-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nexport default router\n",[782],{"type":60,"tag":107,"props":783,"children":784},{"__ignoreMap":327},[785,793,829,866,873,916,923,932,963,981,1004,1013,1022,1030],{"type":60,"tag":434,"props":786,"children":787},{"class":436,"line":437},[788],{"type":60,"tag":434,"props":789,"children":790},{"style":441},[791],{"type":66,"value":792},"\u002F\u002F src\u002Frouter.tsx\n",{"type":60,"tag":434,"props":794,"children":795},{"class":436,"line":447},[796,800,804,809,813,817,821,825],{"type":60,"tag":434,"props":797,"children":798},{"style":451},[799],{"type":66,"value":454},{"type":60,"tag":434,"props":801,"children":802},{"style":457},[803],{"type":66,"value":460},{"type":60,"tag":434,"props":805,"children":806},{"style":463},[807],{"type":66,"value":808}," createRouter",{"type":60,"tag":434,"props":810,"children":811},{"style":457},[812],{"type":66,"value":481},{"type":60,"tag":434,"props":814,"children":815},{"style":451},[816],{"type":66,"value":486},{"type":60,"tag":434,"props":818,"children":819},{"style":457},[820],{"type":66,"value":491},{"type":60,"tag":434,"props":822,"children":823},{"style":494},[824],{"type":66,"value":497},{"type":60,"tag":434,"props":826,"children":827},{"style":457},[828],{"type":66,"value":502},{"type":60,"tag":434,"props":830,"children":831},{"class":436,"line":505},[832,836,840,845,849,853,857,862],{"type":60,"tag":434,"props":833,"children":834},{"style":451},[835],{"type":66,"value":454},{"type":60,"tag":434,"props":837,"children":838},{"style":457},[839],{"type":66,"value":460},{"type":60,"tag":434,"props":841,"children":842},{"style":463},[843],{"type":66,"value":844}," routeTree",{"type":60,"tag":434,"props":846,"children":847},{"style":457},[848],{"type":66,"value":481},{"type":60,"tag":434,"props":850,"children":851},{"style":451},[852],{"type":66,"value":486},{"type":60,"tag":434,"props":854,"children":855},{"style":457},[856],{"type":66,"value":491},{"type":60,"tag":434,"props":858,"children":859},{"style":494},[860],{"type":66,"value":861},".\u002FrouteTree.gen",{"type":60,"tag":434,"props":863,"children":864},{"style":457},[865],{"type":66,"value":502},{"type":60,"tag":434,"props":867,"children":868},{"class":436,"line":515},[869],{"type":60,"tag":434,"props":870,"children":871},{"emptyLinePlaceholder":509},[872],{"type":66,"value":512},{"type":60,"tag":434,"props":874,"children":875},{"class":436,"line":555},[876,881,886,890,894,898,903,908,912],{"type":60,"tag":434,"props":877,"children":878},{"style":524},[879],{"type":66,"value":880},"const",{"type":60,"tag":434,"props":882,"children":883},{"style":463},[884],{"type":66,"value":885}," router ",{"type":60,"tag":434,"props":887,"children":888},{"style":457},[889],{"type":66,"value":537},{"type":60,"tag":434,"props":891,"children":892},{"style":540},[893],{"type":66,"value":808},{"type":60,"tag":434,"props":895,"children":896},{"style":463},[897],{"type":66,"value":547},{"type":60,"tag":434,"props":899,"children":900},{"style":457},[901],{"type":66,"value":902},"{",{"type":60,"tag":434,"props":904,"children":905},{"style":463},[906],{"type":66,"value":907}," routeTree ",{"type":60,"tag":434,"props":909,"children":910},{"style":457},[911],{"type":66,"value":601},{"type":60,"tag":434,"props":913,"children":914},{"style":463},[915],{"type":66,"value":606},{"type":60,"tag":434,"props":917,"children":918},{"class":436,"line":595},[919],{"type":60,"tag":434,"props":920,"children":921},{"emptyLinePlaceholder":509},[922],{"type":66,"value":512},{"type":60,"tag":434,"props":924,"children":926},{"class":436,"line":925},7,[927],{"type":60,"tag":434,"props":928,"children":929},{"style":441},[930],{"type":66,"value":931},"\u002F\u002F REQUIRED for type safety — without this, Link\u002FuseNavigate have no autocomplete\n",{"type":60,"tag":434,"props":933,"children":935},{"class":436,"line":934},8,[936,941,946,950,954,958],{"type":60,"tag":434,"props":937,"children":938},{"style":524},[939],{"type":66,"value":940},"declare",{"type":60,"tag":434,"props":942,"children":943},{"style":524},[944],{"type":66,"value":945}," module",{"type":60,"tag":434,"props":947,"children":948},{"style":457},[949],{"type":66,"value":491},{"type":60,"tag":434,"props":951,"children":952},{"style":494},[953],{"type":66,"value":497},{"type":60,"tag":434,"props":955,"children":956},{"style":457},[957],{"type":66,"value":696},{"type":60,"tag":434,"props":959,"children":960},{"style":457},[961],{"type":66,"value":962}," {\n",{"type":60,"tag":434,"props":964,"children":966},{"class":436,"line":965},9,[967,972,977],{"type":60,"tag":434,"props":968,"children":969},{"style":524},[970],{"type":66,"value":971},"  interface",{"type":60,"tag":434,"props":973,"children":974},{"style":584},[975],{"type":66,"value":976}," Register",{"type":60,"tag":434,"props":978,"children":979},{"style":457},[980],{"type":66,"value":962},{"type":60,"tag":434,"props":982,"children":984},{"class":436,"line":983},10,[985,990,994,999],{"type":60,"tag":434,"props":986,"children":987},{"style":740},[988],{"type":66,"value":989},"    router",{"type":60,"tag":434,"props":991,"children":992},{"style":457},[993],{"type":66,"value":566},{"type":60,"tag":434,"props":995,"children":996},{"style":457},[997],{"type":66,"value":998}," typeof",{"type":60,"tag":434,"props":1000,"children":1001},{"style":463},[1002],{"type":66,"value":1003}," router\n",{"type":60,"tag":434,"props":1005,"children":1007},{"class":436,"line":1006},11,[1008],{"type":60,"tag":434,"props":1009,"children":1010},{"style":457},[1011],{"type":66,"value":1012},"  }\n",{"type":60,"tag":434,"props":1014,"children":1016},{"class":436,"line":1015},12,[1017],{"type":60,"tag":434,"props":1018,"children":1019},{"style":457},[1020],{"type":66,"value":1021},"}\n",{"type":60,"tag":434,"props":1023,"children":1025},{"class":436,"line":1024},13,[1026],{"type":60,"tag":434,"props":1027,"children":1028},{"emptyLinePlaceholder":509},[1029],{"type":66,"value":512},{"type":60,"tag":434,"props":1031,"children":1033},{"class":436,"line":1032},14,[1034,1038,1043],{"type":60,"tag":434,"props":1035,"children":1036},{"style":451},[1037],{"type":66,"value":521},{"type":60,"tag":434,"props":1039,"children":1040},{"style":451},[1041],{"type":66,"value":1042}," default",{"type":60,"tag":434,"props":1044,"children":1045},{"style":463},[1046],{"type":66,"value":1003},{"type":60,"tag":319,"props":1048,"children":1050},{"className":426,"code":1049,"language":428,"meta":327,"style":327},"\u002F\u002F src\u002Fmain.tsx\nimport { RouterProvider } from '@tanstack\u002Freact-router'\nimport router from '.\u002Frouter'\n\nfunction App() {\n  return \u003CRouterProvider router={router} \u002F>\n}\n",[1051],{"type":60,"tag":107,"props":1052,"children":1053},{"__ignoreMap":327},[1054,1062,1098,1126,1133,1155,1191],{"type":60,"tag":434,"props":1055,"children":1056},{"class":436,"line":437},[1057],{"type":60,"tag":434,"props":1058,"children":1059},{"style":441},[1060],{"type":66,"value":1061},"\u002F\u002F src\u002Fmain.tsx\n",{"type":60,"tag":434,"props":1063,"children":1064},{"class":436,"line":447},[1065,1069,1073,1078,1082,1086,1090,1094],{"type":60,"tag":434,"props":1066,"children":1067},{"style":451},[1068],{"type":66,"value":454},{"type":60,"tag":434,"props":1070,"children":1071},{"style":457},[1072],{"type":66,"value":460},{"type":60,"tag":434,"props":1074,"children":1075},{"style":463},[1076],{"type":66,"value":1077}," RouterProvider",{"type":60,"tag":434,"props":1079,"children":1080},{"style":457},[1081],{"type":66,"value":481},{"type":60,"tag":434,"props":1083,"children":1084},{"style":451},[1085],{"type":66,"value":486},{"type":60,"tag":434,"props":1087,"children":1088},{"style":457},[1089],{"type":66,"value":491},{"type":60,"tag":434,"props":1091,"children":1092},{"style":494},[1093],{"type":66,"value":497},{"type":60,"tag":434,"props":1095,"children":1096},{"style":457},[1097],{"type":66,"value":502},{"type":60,"tag":434,"props":1099,"children":1100},{"class":436,"line":505},[1101,1105,1109,1113,1117,1122],{"type":60,"tag":434,"props":1102,"children":1103},{"style":451},[1104],{"type":66,"value":454},{"type":60,"tag":434,"props":1106,"children":1107},{"style":463},[1108],{"type":66,"value":885},{"type":60,"tag":434,"props":1110,"children":1111},{"style":451},[1112],{"type":66,"value":382},{"type":60,"tag":434,"props":1114,"children":1115},{"style":457},[1116],{"type":66,"value":491},{"type":60,"tag":434,"props":1118,"children":1119},{"style":494},[1120],{"type":66,"value":1121},".\u002Frouter",{"type":60,"tag":434,"props":1123,"children":1124},{"style":457},[1125],{"type":66,"value":502},{"type":60,"tag":434,"props":1127,"children":1128},{"class":436,"line":515},[1129],{"type":60,"tag":434,"props":1130,"children":1131},{"emptyLinePlaceholder":509},[1132],{"type":66,"value":512},{"type":60,"tag":434,"props":1134,"children":1135},{"class":436,"line":555},[1136,1141,1146,1151],{"type":60,"tag":434,"props":1137,"children":1138},{"style":524},[1139],{"type":66,"value":1140},"function",{"type":60,"tag":434,"props":1142,"children":1143},{"style":540},[1144],{"type":66,"value":1145}," App",{"type":60,"tag":434,"props":1147,"children":1148},{"style":457},[1149],{"type":66,"value":1150},"()",{"type":60,"tag":434,"props":1152,"children":1153},{"style":457},[1154],{"type":66,"value":962},{"type":60,"tag":434,"props":1156,"children":1157},{"class":436,"line":595},[1158,1163,1167,1172,1177,1182,1186],{"type":60,"tag":434,"props":1159,"children":1160},{"style":451},[1161],{"type":66,"value":1162},"  return",{"type":60,"tag":434,"props":1164,"children":1165},{"style":457},[1166],{"type":66,"value":581},{"type":60,"tag":434,"props":1168,"children":1169},{"style":584},[1170],{"type":66,"value":1171},"RouterProvider",{"type":60,"tag":434,"props":1173,"children":1174},{"style":524},[1175],{"type":66,"value":1176}," router",{"type":60,"tag":434,"props":1178,"children":1179},{"style":457},[1180],{"type":66,"value":1181},"={",{"type":60,"tag":434,"props":1183,"children":1184},{"style":463},[1185],{"type":66,"value":37},{"type":60,"tag":434,"props":1187,"children":1188},{"style":457},[1189],{"type":66,"value":1190},"} \u002F>\n",{"type":60,"tag":434,"props":1192,"children":1193},{"class":436,"line":925},[1194],{"type":60,"tag":434,"props":1195,"children":1196},{"style":457},[1197],{"type":66,"value":1021},{"type":60,"tag":124,"props":1199,"children":1201},{"id":1200},"common-mistakes",[1202],{"type":66,"value":1203},"Common Mistakes",{"type":60,"tag":1205,"props":1206,"children":1208},"h3",{"id":1207},"high-createfileroute-path-string-must-match-the-file-path",[1209],{"type":66,"value":1210},"HIGH: createFileRoute path string must match the file path",{"type":60,"tag":69,"props":1212,"children":1213},{},[1214,1216,1221,1223,1229],{"type":66,"value":1215},"The Vite plugin manages the path string in ",{"type":60,"tag":107,"props":1217,"children":1219},{"className":1218},[],[1220],{"type":66,"value":356},{"type":66,"value":1222},". Do not change it manually — it must match the file's location under ",{"type":60,"tag":107,"props":1224,"children":1226},{"className":1225},[],[1227],{"type":66,"value":1228},"src\u002Froutes\u002F",{"type":66,"value":566},{"type":60,"tag":319,"props":1231,"children":1233},{"className":426,"code":1232,"language":428,"meta":327,"style":327},"\u002F\u002F File: src\u002Froutes\u002Fposts\u002F$postId.tsx\nexport const Route = createFileRoute('\u002Fposts\u002F$postId')({\n  \u002F\u002F ✅ matches file path\n  component: PostPage,\n})\n\nexport const Route = createFileRoute('\u002Fpost\u002F$postId')({\n  \u002F\u002F ❌ silent mismatch\n  component: PostPage,\n})\n",[1234],{"type":60,"tag":107,"props":1235,"children":1236},{"__ignoreMap":327},[1237,1245,1293,1301,1322,1333,1340,1388,1396,1415],{"type":60,"tag":434,"props":1238,"children":1239},{"class":436,"line":437},[1240],{"type":60,"tag":434,"props":1241,"children":1242},{"style":441},[1243],{"type":66,"value":1244},"\u002F\u002F File: src\u002Froutes\u002Fposts\u002F$postId.tsx\n",{"type":60,"tag":434,"props":1246,"children":1247},{"class":436,"line":447},[1248,1252,1256,1260,1264,1268,1272,1276,1281,1285,1289],{"type":60,"tag":434,"props":1249,"children":1250},{"style":451},[1251],{"type":66,"value":521},{"type":60,"tag":434,"props":1253,"children":1254},{"style":524},[1255],{"type":66,"value":527},{"type":60,"tag":434,"props":1257,"children":1258},{"style":463},[1259],{"type":66,"value":532},{"type":60,"tag":434,"props":1261,"children":1262},{"style":457},[1263],{"type":66,"value":537},{"type":60,"tag":434,"props":1265,"children":1266},{"style":540},[1267],{"type":66,"value":637},{"type":60,"tag":434,"props":1269,"children":1270},{"style":463},[1271],{"type":66,"value":547},{"type":60,"tag":434,"props":1273,"children":1274},{"style":457},[1275],{"type":66,"value":696},{"type":60,"tag":434,"props":1277,"children":1278},{"style":494},[1279],{"type":66,"value":1280},"\u002Fposts\u002F$postId",{"type":60,"tag":434,"props":1282,"children":1283},{"style":457},[1284],{"type":66,"value":696},{"type":60,"tag":434,"props":1286,"children":1287},{"style":463},[1288],{"type":66,"value":710},{"type":60,"tag":434,"props":1290,"children":1291},{"style":457},[1292],{"type":66,"value":552},{"type":60,"tag":434,"props":1294,"children":1295},{"class":436,"line":505},[1296],{"type":60,"tag":434,"props":1297,"children":1298},{"style":441},[1299],{"type":66,"value":1300},"  \u002F\u002F ✅ matches file path\n",{"type":60,"tag":434,"props":1302,"children":1303},{"class":436,"line":515},[1304,1308,1312,1317],{"type":60,"tag":434,"props":1305,"children":1306},{"style":740},[1307],{"type":66,"value":561},{"type":60,"tag":434,"props":1309,"children":1310},{"style":457},[1311],{"type":66,"value":566},{"type":60,"tag":434,"props":1313,"children":1314},{"style":463},[1315],{"type":66,"value":1316}," PostPage",{"type":60,"tag":434,"props":1318,"children":1319},{"style":457},[1320],{"type":66,"value":1321},",\n",{"type":60,"tag":434,"props":1323,"children":1324},{"class":436,"line":555},[1325,1329],{"type":60,"tag":434,"props":1326,"children":1327},{"style":457},[1328],{"type":66,"value":601},{"type":60,"tag":434,"props":1330,"children":1331},{"style":463},[1332],{"type":66,"value":606},{"type":60,"tag":434,"props":1334,"children":1335},{"class":436,"line":595},[1336],{"type":60,"tag":434,"props":1337,"children":1338},{"emptyLinePlaceholder":509},[1339],{"type":66,"value":512},{"type":60,"tag":434,"props":1341,"children":1342},{"class":436,"line":925},[1343,1347,1351,1355,1359,1363,1367,1371,1376,1380,1384],{"type":60,"tag":434,"props":1344,"children":1345},{"style":451},[1346],{"type":66,"value":521},{"type":60,"tag":434,"props":1348,"children":1349},{"style":524},[1350],{"type":66,"value":527},{"type":60,"tag":434,"props":1352,"children":1353},{"style":463},[1354],{"type":66,"value":532},{"type":60,"tag":434,"props":1356,"children":1357},{"style":457},[1358],{"type":66,"value":537},{"type":60,"tag":434,"props":1360,"children":1361},{"style":540},[1362],{"type":66,"value":637},{"type":60,"tag":434,"props":1364,"children":1365},{"style":463},[1366],{"type":66,"value":547},{"type":60,"tag":434,"props":1368,"children":1369},{"style":457},[1370],{"type":66,"value":696},{"type":60,"tag":434,"props":1372,"children":1373},{"style":494},[1374],{"type":66,"value":1375},"\u002Fpost\u002F$postId",{"type":60,"tag":434,"props":1377,"children":1378},{"style":457},[1379],{"type":66,"value":696},{"type":60,"tag":434,"props":1381,"children":1382},{"style":463},[1383],{"type":66,"value":710},{"type":60,"tag":434,"props":1385,"children":1386},{"style":457},[1387],{"type":66,"value":552},{"type":60,"tag":434,"props":1389,"children":1390},{"class":436,"line":934},[1391],{"type":60,"tag":434,"props":1392,"children":1393},{"style":441},[1394],{"type":66,"value":1395},"  \u002F\u002F ❌ silent mismatch\n",{"type":60,"tag":434,"props":1397,"children":1398},{"class":436,"line":965},[1399,1403,1407,1411],{"type":60,"tag":434,"props":1400,"children":1401},{"style":740},[1402],{"type":66,"value":561},{"type":60,"tag":434,"props":1404,"children":1405},{"style":457},[1406],{"type":66,"value":566},{"type":60,"tag":434,"props":1408,"children":1409},{"style":463},[1410],{"type":66,"value":1316},{"type":60,"tag":434,"props":1412,"children":1413},{"style":457},[1414],{"type":66,"value":1321},{"type":60,"tag":434,"props":1416,"children":1417},{"class":436,"line":983},[1418,1422],{"type":60,"tag":434,"props":1419,"children":1420},{"style":457},[1421],{"type":66,"value":601},{"type":60,"tag":434,"props":1423,"children":1424},{"style":463},[1425],{"type":66,"value":606},{"type":60,"tag":69,"props":1427,"children":1428},{},[1429],{"type":66,"value":1430},"The plugin auto-generates this string. If you rename a route file, the plugin updates it. Never edit the path string by hand.",{"type":60,"tag":124,"props":1432,"children":1434},{"id":1433},"version-note",[1435],{"type":66,"value":1436},"Version Note",{"type":60,"tag":69,"props":1438,"children":1439},{},[1440,1442,1448,1450,1456,1458,1464,1466,1471],{"type":66,"value":1441},"This skill targets ",{"type":60,"tag":107,"props":1443,"children":1445},{"className":1444},[],[1446],{"type":66,"value":1447},"@tanstack\u002Frouter-core",{"type":66,"value":1449}," v1.171.15. Splat routes use ",{"type":60,"tag":107,"props":1451,"children":1453},{"className":1452},[],[1454],{"type":66,"value":1455},"$",{"type":66,"value":1457}," (not ",{"type":60,"tag":107,"props":1459,"children":1461},{"className":1460},[],[1462],{"type":66,"value":1463},"*",{"type":66,"value":1465},"); the ",{"type":60,"tag":107,"props":1467,"children":1469},{"className":1468},[],[1470],{"type":66,"value":1463},{"type":66,"value":1472}," compat alias will be removed in v2.",{"type":60,"tag":1474,"props":1475,"children":1476},"style",{},[1477],{"type":66,"value":1478},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1480,"total":1581},[1481,1494,1509,1525,1537,1556,1567],{"slug":112,"name":112,"fn":1482,"description":1483,"org":1484,"tags":1485,"stars":26,"repoUrl":27,"updatedAt":1493},"implement route protection in TanStack Router","Route protection with beforeLoad, redirect()\u002Fthrow redirect(), isRedirect helper, authenticated layout routes (_authenticated), non-redirect auth (inline login), RBAC with roles and permissions, auth provider integration (Auth0, Clerk, Supabase), router context for auth state.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1486,1489,1490,1491,1492],{"name":1487,"slug":1488,"type":15},"Auth","auth",{"name":24,"slug":25,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:27:07.639032",{"slug":1495,"name":1495,"fn":1496,"description":1497,"org":1498,"tags":1499,"stars":26,"repoUrl":27,"updatedAt":1508},"auth-server-primitives","implement server-side authentication primitives","Server-side authentication primitives for TanStack Start: session cookies (HttpOnly, Secure, SameSite, __Host- prefix), session read\u002Fissue\u002Fdestroy via createServerFn and middleware, OAuth authorization-code flow with state and PKCE, password-reset enumeration defense, CSRF for non-GET RPCs, rate limiting auth endpoints, session rotation on privilege change. Pairs with router-core\u002Fauth-and-guards for the routing side.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1500,1501,1504,1507],{"name":1487,"slug":1488,"type":15},{"name":1502,"slug":1503,"type":15},"OAuth","oauth",{"name":1505,"slug":1506,"type":15},"Security","security",{"name":9,"slug":8,"type":15},"2026-07-30T05:26:59.504396",{"slug":1510,"name":1510,"fn":1511,"description":1512,"org":1513,"tags":1514,"stars":26,"repoUrl":27,"updatedAt":1524},"code-splitting","configure code splitting in TanStack Router","Automatic code splitting (autoCodeSplitting), .lazy.tsx convention, createLazyFileRoute, createLazyRoute, lazyRouteComponent, getRouteApi for typed hooks in split files, codeSplitGroupings per-route override, splitBehavior programmatic config, critical vs non-critical properties.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1515,1518,1519,1522,1523],{"name":1516,"slug":1517,"type":15},"Engineering","engineering",{"name":24,"slug":25,"type":15},{"name":1520,"slug":1521,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:27:11.494406",{"slug":120,"name":120,"fn":1526,"description":1527,"org":1528,"tags":1529,"stars":26,"repoUrl":27,"updatedAt":1536},"manage data loading in TanStack Router","Route loader option, loaderDeps for cache keys, staleTime\u002FgcTime\u002F defaultPreloadStaleTime SWR caching, pendingComponent\u002FpendingMs\u002F pendingMinMs, errorComponent\u002FonError\u002FonCatch, beforeLoad, router context and createRootRouteWithContext DI pattern, router.invalidate, Await component, deferred data loading with unawaited promises.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1530,1533,1534,1535],{"name":1531,"slug":1532,"type":15},"Caching","caching",{"name":1520,"slug":1521,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:26:54.487943",{"slug":1538,"name":1538,"fn":1539,"description":1540,"org":1541,"tags":1542,"stars":26,"repoUrl":27,"updatedAt":1555},"deployment","deploy TanStack Start applications","Deploy to Cloudflare Workers, Netlify, Vercel, Node.js\u002FDocker, Bun, Railway. Selective SSR (ssr option per route), SPA mode, static prerendering, ISR with Cache-Control headers, SEO and head management.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1543,1546,1548,1551,1552],{"name":1544,"slug":1545,"type":15},"Cloudflare","cloudflare",{"name":1547,"slug":1538,"type":15},"Deployment",{"name":1549,"slug":1550,"type":15},"Netlify","netlify",{"name":9,"slug":8,"type":15},{"name":1553,"slug":1554,"type":15},"Vercel","vercel","2026-07-30T05:26:50.509927",{"slug":1557,"name":1557,"fn":1558,"description":1559,"org":1560,"tags":1561,"stars":26,"repoUrl":27,"updatedAt":1566},"execution-model","manage isomorphic execution models","Isomorphic-by-default principle, environment boundary functions (createServerFn, createServerOnlyFn, createClientOnlyFn, createIsomorphicFn), ClientOnly component, useHydrated hook, import protection, dead code elimination, environment variable safety (VITE_ prefix, process.env).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1562,1565],{"name":1563,"slug":1564,"type":15},"Architecture","architecture",{"name":9,"slug":8,"type":15},"2026-07-30T05:27:04.558441",{"slug":1568,"name":1568,"fn":1569,"description":1570,"org":1571,"tags":1572,"stars":26,"repoUrl":27,"updatedAt":1580},"middleware","implement TanStack Router middleware","createMiddleware, request middleware (.server only), server function middleware (.client + .server), context passing via next({ context }), sendContext for client-server transfer, global middleware via createStart in src\u002Fstart.ts, middleware factories, method order enforcement, fetch override precedence.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1573,1576,1577,1579],{"name":1574,"slug":1575,"type":15},"Backend","backend",{"name":24,"slug":25,"type":15},{"name":1578,"slug":1568,"type":15},"Middleware",{"name":9,"slug":8,"type":15},"2026-07-30T05:26:58.546019",30,{"items":1583,"total":1720},[1584,1598,1610,1622,1635,1647,1657,1667,1680,1690,1701,1711],{"slug":1585,"name":1585,"fn":1586,"description":1587,"org":1588,"tags":1589,"stars":1595,"repoUrl":1596,"updatedAt":1597},"aggregation","perform data aggregation in TanStack Table","Aggregate TanStack Table columns independently of grouping, including grand totals, caller-selected row totals, multiple keyed aggregations, custom context-based definitions, grouped merges, manual values, and worker constraints.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1590,1593,1594],{"name":1591,"slug":1592,"type":15},"Data Analysis","data-analysis",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:25:59.429787",{"slug":1599,"name":1599,"fn":1600,"description":1601,"org":1602,"tags":1603,"stars":1595,"repoUrl":1596,"updatedAt":1609},"api-not-found","diagnose TanStack Table API errors","Diagnose missing TanStack Table v9 exports, options, state slices, and instance methods. Load before inventing an API when code sees a type error, undefined feature method, absent object key, adapter mismatch, or v8-shaped example.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1604,1607,1608],{"name":1605,"slug":1606,"type":15},"Debugging","debugging",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":1611,"name":1611,"fn":1612,"description":1613,"org":1614,"tags":1615,"stars":1595,"repoUrl":1596,"updatedAt":1621},"cell-selection","select rectangular cell ranges in tables","Select rectangular cell ranges with cellSelectionFeature: two-corner range state keyed by row and column id, mousedown\u002Fmouseenter handlers, selection edges, render-order resolution under pinning, and autoResetCellSelection. Load when ranges widen unexpectedly after sorting or column reordering, when a drag re-renders the whole table, or when building copy-to-clipboard from a selection.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1616,1617,1618],{"name":1591,"slug":1592,"type":15},{"name":9,"slug":8,"type":15},{"name":1619,"slug":1620,"type":15},"UI Components","ui-components","2026-07-30T05:25:38.403427",{"slug":1623,"name":1623,"fn":1624,"description":1625,"org":1626,"tags":1627,"stars":1595,"repoUrl":1596,"updatedAt":1634},"client-vs-server","manage TanStack Table data pipelines","Choose client or server ownership for filtering, grouping, sorting, expanding, and pagination in TanStack Table v9. Load for manual* flags, mixed pipelines, server counts, or deciding which dataset each row-model stage receives.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1628,1631,1632,1633],{"name":1629,"slug":1630,"type":15},"Data Pipeline","data-pipeline",{"name":24,"slug":25,"type":15},{"name":1520,"slug":1521,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":1636,"name":1636,"fn":1637,"description":1638,"org":1639,"tags":1640,"stars":1595,"repoUrl":1596,"updatedAt":1646},"column-faceting","build faceted filter UIs","Build faceted filter UIs with columnFacetingFeature, facetedRowModel, facetedUniqueValues, and facetedMinMaxValues. Load for facet counts, numeric ranges, own-filter exclusion, or server-page facet completeness.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1641,1644,1645],{"name":1642,"slug":1643,"type":15},"Data Visualization","data-visualization",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":1648,"name":1648,"fn":1649,"description":1650,"org":1651,"tags":1652,"stars":1595,"repoUrl":1596,"updatedAt":1656},"column-filtering","implement column filtering in TanStack Table","Filter columns with columnFilteringFeature, filteredRowModel, filterFns, filterMeta, nested-row direction, and manualFiltering. Load for accessor compatibility, controlled filter updaters, fuzzy metadata, or client\u002Fserver ownership.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1653,1654,1655],{"name":1591,"slug":1592,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":1658,"name":1658,"fn":1659,"description":1660,"org":1661,"tags":1662,"stars":1595,"repoUrl":1596,"updatedAt":1666},"column-ordering","manage TanStack Table column ordering","Control TanStack Table v9 leaf columnOrder with stable IDs while accounting for pinning regions, visibility, and groupedColumnMode precedence. Load for drag-and-drop columns or rendered order that differs from state.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1663,1664,1665],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1619,"slug":1620,"type":15},"2026-07-30T05:26:03.37801",{"slug":1668,"name":1668,"fn":1669,"description":1670,"org":1671,"tags":1672,"stars":1595,"repoUrl":1596,"updatedAt":1679},"column-pinning","configure column pinning in TanStack Table","Pin columns into logical start, center, and end regions with columnPinningFeature and renderer-owned sticky CSS. Load for RTL offsets, z-index, backgrounds, overflow, widths, gaps, or overlaps.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1673,1676,1677,1678],{"name":1674,"slug":1675,"type":15},"CSS","css",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1619,"slug":1620,"type":15},"2026-07-30T05:25:55.377366",{"slug":1681,"name":1681,"fn":1682,"description":1683,"org":1684,"tags":1685,"stars":1595,"repoUrl":1596,"updatedAt":1689},"column-resizing","implement column resizing in TanStack Table","Wire columnResizingFeature, header.getResizeHandler, resize mode and direction, pointer or touch events, and performant CSS-variable updates. Load when resize state changes but widths do not, or large tables resize slowly.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1686,1687,1688],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1619,"slug":1620,"type":15},"2026-07-30T05:25:51.400011",{"slug":1691,"name":1691,"fn":1692,"description":1693,"org":1694,"tags":1695,"stars":1595,"repoUrl":1596,"updatedAt":1700},"column-sizing","configure column sizing in TanStack Table","Use columnSizingFeature numeric size, minSize, maxSize, getSize, getStart, getAfter, and total-size APIs in table, grid, or flex CSS. Load for auto or percentage misconceptions and sizing\u002Fpinning layout mismatch.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1696,1697,1698,1699],{"name":1674,"slug":1675,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1619,"slug":1620,"type":15},"2026-07-30T05:25:48.703799",{"slug":1702,"name":1702,"fn":1703,"description":1704,"org":1705,"tags":1706,"stars":1595,"repoUrl":1596,"updatedAt":1710},"column-visibility","manage column visibility in TanStack Table","Hide columns with columnVisibilityFeature while rendering visibility-aware header, column, and cell collections. Load when hidden columns remain in the DOM, false-versus-absent state is confused, or enableHiding is misunderstood.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1707,1708,1709],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1619,"slug":1620,"type":15},"2026-07-30T05:25:47.367943",{"slug":54,"name":54,"fn":1712,"description":1713,"org":1714,"tags":1715,"stars":1595,"repoUrl":1596,"updatedAt":1719},"build data grids with TanStack Table","Use TanStack Table v9 as a headless data-grid state and row-processing engine. Load for first-table architecture, stable data and columns, row numbering with getDisplayIndex, semantic rendering, framework adapter choice, or deciding what Table owns versus the renderer.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1716,1717,1718],{"name":1591,"slug":1592,"type":15},{"name":24,"slug":25,"type":15},{"name":1619,"slug":1620,"type":15},"2026-07-30T05:25:52.366295",125]