[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-migrate-from-react-router":3,"mdc--g9rcho-key":50,"related-repo-tanstack-migrate-from-react-router":7355,"related-org-tanstack-migrate-from-react-router":7462},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":45,"sourceUrl":48,"mdContent":49},"migrate-from-react-router","migrate applications to TanStack Router","Step-by-step migration from React Router v7 to TanStack Router: route definition conversion, Link\u002FuseNavigate API differences, useSearchParams to validateSearch + useSearch, useParams with from, Outlet replacement, loader conversion, code splitting differences.",{"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,20],{"name":13,"slug":14,"type":15},"TanStack Router","tanstack-router","tag",{"name":17,"slug":18,"type":15},"Migration","migration",{"name":9,"slug":8,"type":15},{"name":21,"slug":22,"type":15},"React Router","react-router",14787,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Frouter","2026-07-30T05:27:09.562303",null,1761,[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"framework","fullstack","javascript","react","route","router","routing","rpc","search","searchparams","server-functions","ssr","state-management","typesafe","typescript","url",{"repoUrl":24,"stars":23,"forks":27,"topics":46,"description":47},[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"🤖 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\u002Freact-router\u002Fskills\u002Flifecycle\u002Fmigrate-from-react-router","---\nname: migrate-from-react-router\ndescription: >-\n  Step-by-step migration from React Router v7 to TanStack Router:\n  route definition conversion, Link\u002FuseNavigate API differences,\n  useSearchParams to validateSearch + useSearch, useParams with from,\n  Outlet replacement, loader conversion, code splitting differences.\nmetadata:\n  type: lifecycle\n  library: tanstack-router\n  library_version: '1.166.2'\nrequires:\n  - router-core\n  - react-router\nsources:\n  - TanStack\u002Frouter:docs\u002Frouter\u002Fhow-to\u002Fmigrate-from-react-router.md\n  - TanStack\u002Frouter:docs\u002Frouter\u002Finstallation\u002Fmigrate-from-react-router.md\n---\n\n# Migrate from React Router v7 to TanStack Router\n\nThis is a step-by-step migration checklist. Each check covers one conversion task. Complete them in order.\n\n> **CRITICAL**: If your UI is blank after migration, open the console. Errors like \"cannot use useNavigate outside of context\" mean React Router imports remain alongside TanStack Router imports. Uninstall `react-router` (and `react-router-dom` if present) to surface them as TypeScript errors.\n>\n> **CRITICAL**: TanStack Router uses `to` + `params` for navigation, NOT template literal paths. Never interpolate params into the `to` string.\n>\n> **NOTE**: React Router v7 recommends importing from `react-router` (not `react-router-dom`). The `react-router-dom` package still exists but just re-exports from `react-router`. Check for imports from both.\n\n## Pre-Migration\n\n- [ ] **Create a migration branch**\n\n```bash\ngit checkout -b migrate-to-tanstack-router\n```\n\n- [ ] **Install TanStack Router alongside React Router temporarily**\n\n```bash\nnpm install @tanstack\u002Freact-router @tanstack\u002Freact-router-devtools\nnpm install -D @tanstack\u002Frouter-plugin\n```\n\n- [ ] **Configure bundler plugin (Vite example)**\n\n```ts\n\u002F\u002F vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs\u002Fplugin-react'\nimport { tanstackRouter } from '@tanstack\u002Frouter-plugin\u002Fvite'\n\nexport default defineConfig({\n  plugins: [\n    tanstackRouter({ target: 'react', autoCodeSplitting: true }),\n    react(),\n  ],\n})\n```\n\n- [ ] **Create routes directory**\n\n```bash\nmkdir src\u002Froutes\n```\n\n## Route Definitions\n\n- [ ] **Create root route**\n\nReact Router: `\u003CBrowserRouter>` or `createBrowserRouter([{ element: \u003CLayout \u002F>, children: [...] }])`\n\nTanStack Router: `src\u002Froutes\u002F__root.tsx`\n\n```tsx\n\u002F\u002F src\u002Froutes\u002F__root.tsx\nimport { createRootRoute, Link, Outlet } from '@tanstack\u002Freact-router'\nimport { TanStackRouterDevtools } from '@tanstack\u002Freact-router-devtools'\n\nexport const Route = createRootRoute({\n  component: () => (\n    \u003C>\n      \u003Cnav>\n        \u003CLink to=\"\u002F\">Home\u003C\u002FLink>\n        \u003CLink to=\"\u002Fabout\">About\u003C\u002FLink>\n      \u003C\u002Fnav>\n      \u003COutlet \u002F>\n      \u003CTanStackRouterDevtools \u002F>\n    \u003C\u002F>\n  ),\n})\n```\n\n- [ ] **Create router instance with type registration**\n\n```tsx\n\u002F\u002F src\u002Fmain.tsx\nimport { StrictMode } from 'react'\nimport ReactDOM from 'react-dom\u002Fclient'\nimport { RouterProvider, createRouter } from '@tanstack\u002Freact-router'\nimport { routeTree } from '.\u002FrouteTree.gen'\n\nconst router = createRouter({ routeTree })\n\ndeclare module '@tanstack\u002Freact-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nconst rootElement = document.getElementById('root')!\nif (!rootElement.innerHTML) {\n  ReactDOM.createRoot(rootElement).render(\n    \u003CStrictMode>\n      \u003CRouterProvider router={router} \u002F>\n    \u003C\u002FStrictMode>,\n  )\n}\n```\n\n- [ ] **Convert each route file to `createFileRoute`**\n\nReact Router:\n\n```tsx\n\u002F\u002F Defined in route config array\n{ path: '\u002Fposts', element: \u003CPosts \u002F>, loader: postsLoader }\n```\n\nTanStack Router:\n\n```tsx\n\u002F\u002F src\u002Froutes\u002Fposts.tsx\nimport { createFileRoute } from '@tanstack\u002Freact-router'\n\nexport const Route = createFileRoute('\u002Fposts')({\n  loader: async () => {\n    const posts = await fetchPosts()\n    return { posts }\n  },\n  component: PostsPage,\n})\n\nfunction PostsPage() {\n  const { posts } = Route.useLoaderData()\n  return (\n    \u003Cul>\n      {posts.map((p) => (\n        \u003Cli key={p.id}>{p.title}\u003C\u002Fli>\n      ))}\n    \u003C\u002Ful>\n  )\n}\n```\n\n- [ ] **Convert dynamic routes**\n\nReact Router: `\u002Fposts\u002F:postId` (colon syntax)\n\nTanStack Router: `\u002Fposts\u002F$postId` (dollar syntax)\n\n```tsx\n\u002F\u002F src\u002Froutes\u002Fposts\u002F$postId.tsx\nimport { createFileRoute } from '@tanstack\u002Freact-router'\n\nexport const Route = createFileRoute('\u002Fposts\u002F$postId')({\n  loader: async ({ params }) => {\n    const post = await fetchPost(params.postId)\n    return { post }\n  },\n  component: PostPage,\n})\n\nfunction PostPage() {\n  const { post } = Route.useLoaderData()\n  return \u003Carticle>{post.title}\u003C\u002Farticle>\n}\n```\n\n## Navigation\n\n- [ ] **Convert all `\u003CLink>` components**\n\nReact Router:\n\n```tsx\nimport { Link } from 'react-router'\n;\u003CLink to={`\u002Fposts\u002F${postId}`}>View Post\u003C\u002FLink>\n```\n\nTanStack Router:\n\n```tsx\nimport { Link } from '@tanstack\u002Freact-router'\n;\u003CLink to=\"\u002Fposts\u002F$postId\" params={{ postId }}>\n  View Post\n\u003C\u002FLink>\n```\n\nKey differences:\n\n- `to` is a route path pattern, NOT an interpolated string\n- `params` is a separate prop with typed values\n- Active styling: use `activeProps={{ className: 'font-bold' }}` or `data-status=\"active\"` attribute for CSS\n\n- [ ] **Convert all `useNavigate` calls**\n\nReact Router:\n\n```tsx\nimport { useNavigate } from 'react-router'\nconst navigate = useNavigate()\nnavigate(`\u002Fposts\u002F${postId}`)\n```\n\nTanStack Router:\n\n```tsx\nimport { useNavigate } from '@tanstack\u002Freact-router'\nconst navigate = useNavigate()\nnavigate({ to: '\u002Fposts\u002F$postId', params: { postId } })\n```\n\n## Search Params\n\n- [ ] **Replace `useSearchParams` with `validateSearch` + `useSearch`**\n\nReact Router:\n\n```tsx\nimport { useSearchParams } from 'react-router'\n\nfunction Posts() {\n  const [searchParams, setSearchParams] = useSearchParams()\n  const page = Number(searchParams.get('page')) || 1\n\n  const goToPage = (p: number) => setSearchParams({ page: String(p) })\n}\n```\n\nTanStack Router:\n\n```tsx\n\u002F\u002F In the route definition:\nimport { createFileRoute } from '@tanstack\u002Freact-router'\nimport { z } from 'zod'\n\nexport const Route = createFileRoute('\u002Fposts')({\n  validateSearch: z.object({\n    page: z.number().default(1).catch(1),\n  }),\n  component: Posts,\n})\n\n\u002F\u002F In the component:\nimport { useNavigate } from '@tanstack\u002Freact-router'\n\nfunction Posts() {\n  const { page } = Route.useSearch()\n  const navigate = useNavigate({ from: '\u002Fposts' })\n\n  const goToPage = (p: number) => {\n    navigate({ search: (prev) => ({ ...prev, page: p }) })\n  }\n}\n```\n\nKey differences:\n\n- Search params are validated and typed at the route level\n- `useSearch()` returns typed objects, not `URLSearchParams`\n- Update with function form to preserve other params\n\n## Path Params\n\n- [ ] **Update `useParams` with `from` property**\n\nReact Router:\n\n```tsx\nimport { useParams } from 'react-router'\nconst { postId } = useParams()\n```\n\nTanStack Router:\n\n```tsx\nimport { useParams } from '@tanstack\u002Freact-router'\nconst { postId } = useParams({ from: '\u002Fposts\u002F$postId' })\n```\n\nOr from within the route component:\n\n```tsx\nconst { postId } = Route.useParams()\n```\n\n## `useLocation` — Common Pitfall\n\n- [ ] **Replace `useLocation` with specific hooks**\n\nReact Router's `useLocation` is heavily used, and TanStack Router has a hook with the same name — but they are NOT equivalent. TanStack Router's `useLocation()` returns the router's current location, which during pending navigations may differ from what's currently rendered. Most React Router `useLocation` usage should be replaced with more specific hooks. See [#3110](https:\u002F\u002Fgithub.com\u002FTanStack\u002Frouter\u002Fissues\u002F3110).\n\nReplace based on what you actually need:\n\n```tsx\n\u002F\u002F React Router\nimport { useLocation } from 'react-router'\nconst location = useLocation()\n\n\u002F\u002F ❌ DON'T just swap to TanStack Router's useLocation — it's the \"live\" URL\nimport { useLocation } from '@tanstack\u002Freact-router'\n\n\u002F\u002F ✅ DO use the specific hook for what you need:\nimport {\n  useMatch,\n  useMatches,\n  useParams,\n  useSearch,\n} from '@tanstack\u002Freact-router'\n\n\u002F\u002F Current route match (replaces most useLocation().pathname usage)\nconst match = useMatch({ from: '\u002Fposts\u002F$postId' })\n\n\u002F\u002F All active matches (replaces useLocation for breadcrumbs\u002Fanalytics)\nconst matches = useMatches()\n\n\u002F\u002F Path params (replaces useLocation + manual parsing)\nconst { postId } = useParams({ from: '\u002Fposts\u002F$postId' })\n\n\u002F\u002F Search params (replaces useLocation().search parsing)\nconst { page } = useSearch({ from: '\u002Fposts' })\n```\n\n## Outlet\n\n- [ ] **Replace React Router `Outlet` with TanStack Router `Outlet`**\n\nThe API is identical — just change the import:\n\n```tsx\n\u002F\u002F Before\nimport { Outlet } from 'react-router'\n\n\u002F\u002F After\nimport { Outlet } from '@tanstack\u002Freact-router'\n```\n\n## Loaders\n\n- [ ] **Convert React Router loaders**\n\nReact Router (v7):\n\n```tsx\nexport async function loader({ params }) {\n  const post = await fetchPost(params.postId)\n  return { post }\n}\n\nexport default function Post() {\n  const { post } = useLoaderData()\n  return \u003Cdiv>{post.title}\u003C\u002Fdiv>\n}\n```\n\nTanStack Router:\n\n```tsx\nexport const Route = createFileRoute('\u002Fposts\u002F$postId')({\n  loader: async ({ params }) => {\n    const post = await fetchPost(params.postId)\n    return { post }\n  },\n  component: Post,\n})\n\nfunction Post() {\n  const { post } = Route.useLoaderData()\n  return \u003Cdiv>{post.title}\u003C\u002Fdiv>\n}\n```\n\nKey differences:\n\n- Loader is a route option, not a separate export\n- `useLoaderData()` is called via `Route.useLoaderData()` (or `useLoaderData({ from })`)\n- TanStack Router loaders run on the CLIENT by default (not server-only)\n- No `json()` wrapper needed — return plain objects\n\n## Code Splitting\n\n- [ ] **Convert lazy route imports** — with `autoCodeSplitting: true` in the plugin config, this is automatic. For manual splitting, use `.lazy.tsx` files:\n\n```tsx\n\u002F\u002F src\u002Froutes\u002Flazy-page.lazy.tsx\nimport { createLazyFileRoute } from '@tanstack\u002Freact-router'\n\nexport const Route = createLazyFileRoute('\u002Flazy-page')({\n  component: () => \u003Cdiv>Lazy loaded\u003C\u002Fdiv>,\n})\n```\n\n## Cleanup\n\n- [ ] **Remove React Router and verify**\n\n```bash\nnpm uninstall react-router react-router-dom\ngrep -r \"from 'react-router\" src\u002F  # find stale imports\nnpx tsc --noEmit                    # verify clean build\n```\n\n- [ ] **Test all routes** — verify rendering, navigation (incl. back\u002Fforward), search params, dynamic params, and loaders\n\n## Common Mistakes\n\n### 1. HIGH: Leaving React Router imports alongside TanStack Router\n\nBoth libraries export `Link`, `useNavigate`, `Outlet`, etc. Leftover React Router imports cause \"cannot use useNavigate outside of context\" errors because the wrong context provider is used.\n\n```tsx\n\u002F\u002F WRONG — mixed imports\nimport { Link } from '@tanstack\u002Freact-router'\nimport { useNavigate } from 'react-router' \u002F\u002F \u003C- still React Router!\n\n\u002F\u002F CORRECT — all from TanStack Router\nimport { Link, useNavigate } from '@tanstack\u002Freact-router'\n```\n\n**Fix**: Uninstall `react-router`\u002F`react-router-dom` completely. TypeScript will flag every stale import.\n\n### 2. HIGH: Using React Router `useSearchParams` pattern\n\n```tsx\n\u002F\u002F WRONG — React Router pattern, returns URLSearchParams\nconst [searchParams, setSearchParams] = useSearchParams()\nconst page = Number(searchParams.get('page'))\n\n\u002F\u002F CORRECT — TanStack Router pattern, returns typed object\n\u002F\u002F Route definition:\nvalidateSearch:\n  z.object({\n    page: z.number().default(1).catch(1),\n  }),\n\n\u002F\u002F Component:\nconst { page } = Route.useSearch()\n\u002F\u002F page is already typed as number — no casting needed\n```\n\n### 3. HIGH: Interpolating params into `to` string\n\n```tsx\n\u002F\u002F WRONG — React Router habit\n\u003CLink to={`\u002Fposts\u002F${postId}`}>Post\u003C\u002FLink>\n\n\u002F\u002F CORRECT — TanStack Router: path pattern + params prop\n\u003CLink to=\"\u002Fposts\u002F$postId\" params={{ postId }}>Post\u003C\u002FLink>\n```\n\n### 4. MEDIUM: Using `:param` syntax instead of `$param`\n\n```text\nReact Router: \u002Fposts\u002F:postId\nTanStack Router: \u002Fposts\u002F$postId\n```\n\nFile naming also uses `$`: `src\u002Froutes\u002Fposts\u002F$postId.tsx`\n\n## Quick Reference: API Mapping\n\n| React Router v7              | TanStack Router                                      |\n| ---------------------------- | ---------------------------------------------------- |\n| `\u003CBrowserRouter>`            | `\u003CRouterProvider router={router} \u002F>`                 |\n| `\u003CRoutes>` \u002F `\u003CRoute>`       | File-based: `src\u002Froutes\u002F*.tsx`                       |\n| `\u003CLink to=\"\u002Fpath\">`          | `\u003CLink to=\"\u002Fpath\">`                                  |\n| `\u003CLink to={`\u002Fposts\u002F${id}`}>` | `\u003CLink to=\"\u002Fposts\u002F$postId\" params={{ postId: id }}>` |\n| `useNavigate()('\u002Fpath')`     | `navigate({ to: '\u002Fpath' })`                          |\n| `useParams()`                | `useParams({ from: '\u002Froute\u002F$param' })`               |\n| `useSearchParams()`          | `validateSearch` + `useSearch({ from })`             |\n| `useLoaderData()`            | `Route.useLoaderData()`                              |\n| `useLocation()`              | `useMatch`, `useMatches`, `useParams`, `useSearch`   |\n| `\u003COutlet \u002F>`                 | `\u003COutlet \u002F>`                                         |\n| `loader({ params })`         | `loader: ({ params }) => ...` (route option)         |\n| `action({ request })`        | Use mutations \u002F form libraries                       |\n| `lazy(() => import(...))`    | `autoCodeSplitting` or `.lazy.tsx` files             |\n| `:paramName`                 | `$paramName`                                         |\n| `*` (splat)                  | `$` (splat, accessed via `_splat`)                   |\n",{"data":51,"body":60},{"name":4,"description":6,"metadata":52,"requires":55,"sources":57},{"type":53,"library":14,"library_version":54},"lifecycle","1.166.2",[56,22],"router-core",[58,59],"TanStack\u002Frouter:docs\u002Frouter\u002Fhow-to\u002Fmigrate-from-react-router.md","TanStack\u002Frouter:docs\u002Frouter\u002Finstallation\u002Fmigrate-from-react-router.md",{"type":61,"children":62},"root",[63,72,78,179,186,211,250,267,319,336,646,663,683,689,706,725,736,1137,1154,1685,1708,1713,1804,1809,2284,2301,2313,2325,2688,2694,2719,2723,2828,2832,2943,2948,3012,3016,3119,3123,3256,3262,3300,3304,3589,3593,4216,4220,4250,4256,4287,4291,4365,4369,4474,4479,4525,4537,4560,4597,4602,5098,5103,5132,5137,5237,5243,5260,5265,5496,5500,5803,5807,5859,5865,5900,6065,6071,6088,6177,6196,6202,6209,6234,6382,6405,6418,6732,6745,6900,6920,6930,6949,6955,7349],{"type":64,"tag":65,"props":66,"children":68},"element","h1",{"id":67},"migrate-from-react-router-v7-to-tanstack-router",[69],{"type":70,"value":71},"text","Migrate from React Router v7 to TanStack Router",{"type":64,"tag":73,"props":74,"children":75},"p",{},[76],{"type":70,"value":77},"This is a step-by-step migration checklist. Each check covers one conversion task. Complete them in order.",{"type":64,"tag":79,"props":80,"children":81},"blockquote",{},[82,109,141],{"type":64,"tag":73,"props":83,"children":84},{},[85,91,93,99,101,107],{"type":64,"tag":86,"props":87,"children":88},"strong",{},[89],{"type":70,"value":90},"CRITICAL",{"type":70,"value":92},": If your UI is blank after migration, open the console. Errors like \"cannot use useNavigate outside of context\" mean React Router imports remain alongside TanStack Router imports. Uninstall ",{"type":64,"tag":94,"props":95,"children":97},"code",{"className":96},[],[98],{"type":70,"value":22},{"type":70,"value":100}," (and ",{"type":64,"tag":94,"props":102,"children":104},{"className":103},[],[105],{"type":70,"value":106},"react-router-dom",{"type":70,"value":108}," if present) to surface them as TypeScript errors.",{"type":64,"tag":73,"props":110,"children":111},{},[112,116,118,124,126,132,134,139],{"type":64,"tag":86,"props":113,"children":114},{},[115],{"type":70,"value":90},{"type":70,"value":117},": TanStack Router uses ",{"type":64,"tag":94,"props":119,"children":121},{"className":120},[],[122],{"type":70,"value":123},"to",{"type":70,"value":125}," + ",{"type":64,"tag":94,"props":127,"children":129},{"className":128},[],[130],{"type":70,"value":131},"params",{"type":70,"value":133}," for navigation, NOT template literal paths. Never interpolate params into the ",{"type":64,"tag":94,"props":135,"children":137},{"className":136},[],[138],{"type":70,"value":123},{"type":70,"value":140}," string.",{"type":64,"tag":73,"props":142,"children":143},{},[144,149,151,156,158,163,165,170,172,177],{"type":64,"tag":86,"props":145,"children":146},{},[147],{"type":70,"value":148},"NOTE",{"type":70,"value":150},": React Router v7 recommends importing from ",{"type":64,"tag":94,"props":152,"children":154},{"className":153},[],[155],{"type":70,"value":22},{"type":70,"value":157}," (not ",{"type":64,"tag":94,"props":159,"children":161},{"className":160},[],[162],{"type":70,"value":106},{"type":70,"value":164},"). The ",{"type":64,"tag":94,"props":166,"children":168},{"className":167},[],[169],{"type":70,"value":106},{"type":70,"value":171}," package still exists but just re-exports from ",{"type":64,"tag":94,"props":173,"children":175},{"className":174},[],[176],{"type":70,"value":22},{"type":70,"value":178},". Check for imports from both.",{"type":64,"tag":180,"props":181,"children":183},"h2",{"id":182},"pre-migration",[184],{"type":70,"value":185},"Pre-Migration",{"type":64,"tag":187,"props":188,"children":191},"ul",{"className":189},[190],"contains-task-list",[192],{"type":64,"tag":193,"props":194,"children":197},"li",{"className":195},[196],"task-list-item",[198,204,206],{"type":64,"tag":199,"props":200,"children":203},"input",{"disabled":201,"type":202},true,"checkbox",[],{"type":70,"value":205}," ",{"type":64,"tag":86,"props":207,"children":208},{},[209],{"type":70,"value":210},"Create a migration branch",{"type":64,"tag":212,"props":213,"children":218},"pre",{"className":214,"code":215,"language":216,"meta":217,"style":217},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","git checkout -b migrate-to-tanstack-router\n","bash","",[219],{"type":64,"tag":94,"props":220,"children":221},{"__ignoreMap":217},[222],{"type":64,"tag":223,"props":224,"children":227},"span",{"class":225,"line":226},"line",1,[228,234,240,245],{"type":64,"tag":223,"props":229,"children":231},{"style":230},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[232],{"type":70,"value":233},"git",{"type":64,"tag":223,"props":235,"children":237},{"style":236},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[238],{"type":70,"value":239}," checkout",{"type":64,"tag":223,"props":241,"children":242},{"style":236},[243],{"type":70,"value":244}," -b",{"type":64,"tag":223,"props":246,"children":247},{"style":236},[248],{"type":70,"value":249}," migrate-to-tanstack-router\n",{"type":64,"tag":187,"props":251,"children":253},{"className":252},[190],[254],{"type":64,"tag":193,"props":255,"children":257},{"className":256},[196],[258,261,262],{"type":64,"tag":199,"props":259,"children":260},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":263,"children":264},{},[265],{"type":70,"value":266},"Install TanStack Router alongside React Router temporarily",{"type":64,"tag":212,"props":268,"children":270},{"className":214,"code":269,"language":216,"meta":217,"style":217},"npm install @tanstack\u002Freact-router @tanstack\u002Freact-router-devtools\nnpm install -D @tanstack\u002Frouter-plugin\n",[271],{"type":64,"tag":94,"props":272,"children":273},{"__ignoreMap":217},[274,297],{"type":64,"tag":223,"props":275,"children":276},{"class":225,"line":226},[277,282,287,292],{"type":64,"tag":223,"props":278,"children":279},{"style":230},[280],{"type":70,"value":281},"npm",{"type":64,"tag":223,"props":283,"children":284},{"style":236},[285],{"type":70,"value":286}," install",{"type":64,"tag":223,"props":288,"children":289},{"style":236},[290],{"type":70,"value":291}," @tanstack\u002Freact-router",{"type":64,"tag":223,"props":293,"children":294},{"style":236},[295],{"type":70,"value":296}," @tanstack\u002Freact-router-devtools\n",{"type":64,"tag":223,"props":298,"children":300},{"class":225,"line":299},2,[301,305,309,314],{"type":64,"tag":223,"props":302,"children":303},{"style":230},[304],{"type":70,"value":281},{"type":64,"tag":223,"props":306,"children":307},{"style":236},[308],{"type":70,"value":286},{"type":64,"tag":223,"props":310,"children":311},{"style":236},[312],{"type":70,"value":313}," -D",{"type":64,"tag":223,"props":315,"children":316},{"style":236},[317],{"type":70,"value":318}," @tanstack\u002Frouter-plugin\n",{"type":64,"tag":187,"props":320,"children":322},{"className":321},[190],[323],{"type":64,"tag":193,"props":324,"children":326},{"className":325},[196],[327,330,331],{"type":64,"tag":199,"props":328,"children":329},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":332,"children":333},{},[334],{"type":70,"value":335},"Configure bundler plugin (Vite example)",{"type":64,"tag":212,"props":337,"children":341},{"className":338,"code":339,"language":340,"meta":217,"style":217},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs\u002Fplugin-react'\nimport { tanstackRouter } from '@tanstack\u002Frouter-plugin\u002Fvite'\n\nexport default defineConfig({\n  plugins: [\n    tanstackRouter({ target: 'react', autoCodeSplitting: true }),\n    react(),\n  ],\n})\n","ts",[342],{"type":64,"tag":94,"props":343,"children":344},{"__ignoreMap":217},[345,354,400,431,469,478,507,527,601,619,632],{"type":64,"tag":223,"props":346,"children":347},{"class":225,"line":226},[348],{"type":64,"tag":223,"props":349,"children":351},{"style":350},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[352],{"type":70,"value":353},"\u002F\u002F vite.config.ts\n",{"type":64,"tag":223,"props":355,"children":356},{"class":225,"line":299},[357,363,369,375,380,385,390,395],{"type":64,"tag":223,"props":358,"children":360},{"style":359},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[361],{"type":70,"value":362},"import",{"type":64,"tag":223,"props":364,"children":366},{"style":365},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[367],{"type":70,"value":368}," {",{"type":64,"tag":223,"props":370,"children":372},{"style":371},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[373],{"type":70,"value":374}," defineConfig",{"type":64,"tag":223,"props":376,"children":377},{"style":365},[378],{"type":70,"value":379}," }",{"type":64,"tag":223,"props":381,"children":382},{"style":359},[383],{"type":70,"value":384}," from",{"type":64,"tag":223,"props":386,"children":387},{"style":365},[388],{"type":70,"value":389}," '",{"type":64,"tag":223,"props":391,"children":392},{"style":236},[393],{"type":70,"value":394},"vite",{"type":64,"tag":223,"props":396,"children":397},{"style":365},[398],{"type":70,"value":399},"'\n",{"type":64,"tag":223,"props":401,"children":403},{"class":225,"line":402},3,[404,408,413,418,422,427],{"type":64,"tag":223,"props":405,"children":406},{"style":359},[407],{"type":70,"value":362},{"type":64,"tag":223,"props":409,"children":410},{"style":371},[411],{"type":70,"value":412}," react ",{"type":64,"tag":223,"props":414,"children":415},{"style":359},[416],{"type":70,"value":417},"from",{"type":64,"tag":223,"props":419,"children":420},{"style":365},[421],{"type":70,"value":389},{"type":64,"tag":223,"props":423,"children":424},{"style":236},[425],{"type":70,"value":426},"@vitejs\u002Fplugin-react",{"type":64,"tag":223,"props":428,"children":429},{"style":365},[430],{"type":70,"value":399},{"type":64,"tag":223,"props":432,"children":434},{"class":225,"line":433},4,[435,439,443,448,452,456,460,465],{"type":64,"tag":223,"props":436,"children":437},{"style":359},[438],{"type":70,"value":362},{"type":64,"tag":223,"props":440,"children":441},{"style":365},[442],{"type":70,"value":368},{"type":64,"tag":223,"props":444,"children":445},{"style":371},[446],{"type":70,"value":447}," tanstackRouter",{"type":64,"tag":223,"props":449,"children":450},{"style":365},[451],{"type":70,"value":379},{"type":64,"tag":223,"props":453,"children":454},{"style":359},[455],{"type":70,"value":384},{"type":64,"tag":223,"props":457,"children":458},{"style":365},[459],{"type":70,"value":389},{"type":64,"tag":223,"props":461,"children":462},{"style":236},[463],{"type":70,"value":464},"@tanstack\u002Frouter-plugin\u002Fvite",{"type":64,"tag":223,"props":466,"children":467},{"style":365},[468],{"type":70,"value":399},{"type":64,"tag":223,"props":470,"children":472},{"class":225,"line":471},5,[473],{"type":64,"tag":223,"props":474,"children":475},{"emptyLinePlaceholder":201},[476],{"type":70,"value":477},"\n",{"type":64,"tag":223,"props":479,"children":481},{"class":225,"line":480},6,[482,487,492,497,502],{"type":64,"tag":223,"props":483,"children":484},{"style":359},[485],{"type":70,"value":486},"export",{"type":64,"tag":223,"props":488,"children":489},{"style":359},[490],{"type":70,"value":491}," default",{"type":64,"tag":223,"props":493,"children":495},{"style":494},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[496],{"type":70,"value":374},{"type":64,"tag":223,"props":498,"children":499},{"style":371},[500],{"type":70,"value":501},"(",{"type":64,"tag":223,"props":503,"children":504},{"style":365},[505],{"type":70,"value":506},"{\n",{"type":64,"tag":223,"props":508,"children":510},{"class":225,"line":509},7,[511,517,522],{"type":64,"tag":223,"props":512,"children":514},{"style":513},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[515],{"type":70,"value":516},"  plugins",{"type":64,"tag":223,"props":518,"children":519},{"style":365},[520],{"type":70,"value":521},":",{"type":64,"tag":223,"props":523,"children":524},{"style":371},[525],{"type":70,"value":526}," [\n",{"type":64,"tag":223,"props":528,"children":530},{"class":225,"line":529},8,[531,536,540,545,550,554,558,562,567,572,577,581,587,591,596],{"type":64,"tag":223,"props":532,"children":533},{"style":494},[534],{"type":70,"value":535},"    tanstackRouter",{"type":64,"tag":223,"props":537,"children":538},{"style":371},[539],{"type":70,"value":501},{"type":64,"tag":223,"props":541,"children":542},{"style":365},[543],{"type":70,"value":544},"{",{"type":64,"tag":223,"props":546,"children":547},{"style":513},[548],{"type":70,"value":549}," target",{"type":64,"tag":223,"props":551,"children":552},{"style":365},[553],{"type":70,"value":521},{"type":64,"tag":223,"props":555,"children":556},{"style":365},[557],{"type":70,"value":389},{"type":64,"tag":223,"props":559,"children":560},{"style":236},[561],{"type":70,"value":32},{"type":64,"tag":223,"props":563,"children":564},{"style":365},[565],{"type":70,"value":566},"'",{"type":64,"tag":223,"props":568,"children":569},{"style":365},[570],{"type":70,"value":571},",",{"type":64,"tag":223,"props":573,"children":574},{"style":513},[575],{"type":70,"value":576}," autoCodeSplitting",{"type":64,"tag":223,"props":578,"children":579},{"style":365},[580],{"type":70,"value":521},{"type":64,"tag":223,"props":582,"children":584},{"style":583},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[585],{"type":70,"value":586}," true",{"type":64,"tag":223,"props":588,"children":589},{"style":365},[590],{"type":70,"value":379},{"type":64,"tag":223,"props":592,"children":593},{"style":371},[594],{"type":70,"value":595},")",{"type":64,"tag":223,"props":597,"children":598},{"style":365},[599],{"type":70,"value":600},",\n",{"type":64,"tag":223,"props":602,"children":604},{"class":225,"line":603},9,[605,610,615],{"type":64,"tag":223,"props":606,"children":607},{"style":494},[608],{"type":70,"value":609},"    react",{"type":64,"tag":223,"props":611,"children":612},{"style":371},[613],{"type":70,"value":614},"()",{"type":64,"tag":223,"props":616,"children":617},{"style":365},[618],{"type":70,"value":600},{"type":64,"tag":223,"props":620,"children":622},{"class":225,"line":621},10,[623,628],{"type":64,"tag":223,"props":624,"children":625},{"style":371},[626],{"type":70,"value":627},"  ]",{"type":64,"tag":223,"props":629,"children":630},{"style":365},[631],{"type":70,"value":600},{"type":64,"tag":223,"props":633,"children":635},{"class":225,"line":634},11,[636,641],{"type":64,"tag":223,"props":637,"children":638},{"style":365},[639],{"type":70,"value":640},"}",{"type":64,"tag":223,"props":642,"children":643},{"style":371},[644],{"type":70,"value":645},")\n",{"type":64,"tag":187,"props":647,"children":649},{"className":648},[190],[650],{"type":64,"tag":193,"props":651,"children":653},{"className":652},[196],[654,657,658],{"type":64,"tag":199,"props":655,"children":656},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":659,"children":660},{},[661],{"type":70,"value":662},"Create routes directory",{"type":64,"tag":212,"props":664,"children":666},{"className":214,"code":665,"language":216,"meta":217,"style":217},"mkdir src\u002Froutes\n",[667],{"type":64,"tag":94,"props":668,"children":669},{"__ignoreMap":217},[670],{"type":64,"tag":223,"props":671,"children":672},{"class":225,"line":226},[673,678],{"type":64,"tag":223,"props":674,"children":675},{"style":230},[676],{"type":70,"value":677},"mkdir",{"type":64,"tag":223,"props":679,"children":680},{"style":236},[681],{"type":70,"value":682}," src\u002Froutes\n",{"type":64,"tag":180,"props":684,"children":686},{"id":685},"route-definitions",[687],{"type":70,"value":688},"Route Definitions",{"type":64,"tag":187,"props":690,"children":692},{"className":691},[190],[693],{"type":64,"tag":193,"props":694,"children":696},{"className":695},[196],[697,700,701],{"type":64,"tag":199,"props":698,"children":699},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":702,"children":703},{},[704],{"type":70,"value":705},"Create root route",{"type":64,"tag":73,"props":707,"children":708},{},[709,711,717,719],{"type":70,"value":710},"React Router: ",{"type":64,"tag":94,"props":712,"children":714},{"className":713},[],[715],{"type":70,"value":716},"\u003CBrowserRouter>",{"type":70,"value":718}," or ",{"type":64,"tag":94,"props":720,"children":722},{"className":721},[],[723],{"type":70,"value":724},"createBrowserRouter([{ element: \u003CLayout \u002F>, children: [...] }])",{"type":64,"tag":73,"props":726,"children":727},{},[728,730],{"type":70,"value":729},"TanStack Router: ",{"type":64,"tag":94,"props":731,"children":733},{"className":732},[],[734],{"type":70,"value":735},"src\u002Froutes\u002F__root.tsx",{"type":64,"tag":212,"props":737,"children":741},{"className":738,"code":739,"language":740,"meta":217,"style":217},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F src\u002Froutes\u002F__root.tsx\nimport { createRootRoute, Link, Outlet } from '@tanstack\u002Freact-router'\nimport { TanStackRouterDevtools } from '@tanstack\u002Freact-router-devtools'\n\nexport const Route = createRootRoute({\n  component: () => (\n    \u003C>\n      \u003Cnav>\n        \u003CLink to=\"\u002F\">Home\u003C\u002FLink>\n        \u003CLink to=\"\u002Fabout\">About\u003C\u002FLink>\n      \u003C\u002Fnav>\n      \u003COutlet \u002F>\n      \u003CTanStackRouterDevtools \u002F>\n    \u003C\u002F>\n  ),\n})\n","tsx",[742],{"type":64,"tag":94,"props":743,"children":744},{"__ignoreMap":217},[745,753,808,845,852,887,914,922,940,999,1052,1068,1086,1103,1112,1125],{"type":64,"tag":223,"props":746,"children":747},{"class":225,"line":226},[748],{"type":64,"tag":223,"props":749,"children":750},{"style":350},[751],{"type":70,"value":752},"\u002F\u002F src\u002Froutes\u002F__root.tsx\n",{"type":64,"tag":223,"props":754,"children":755},{"class":225,"line":299},[756,760,764,769,773,778,782,787,791,795,799,804],{"type":64,"tag":223,"props":757,"children":758},{"style":359},[759],{"type":70,"value":362},{"type":64,"tag":223,"props":761,"children":762},{"style":365},[763],{"type":70,"value":368},{"type":64,"tag":223,"props":765,"children":766},{"style":371},[767],{"type":70,"value":768}," createRootRoute",{"type":64,"tag":223,"props":770,"children":771},{"style":365},[772],{"type":70,"value":571},{"type":64,"tag":223,"props":774,"children":775},{"style":371},[776],{"type":70,"value":777}," Link",{"type":64,"tag":223,"props":779,"children":780},{"style":365},[781],{"type":70,"value":571},{"type":64,"tag":223,"props":783,"children":784},{"style":371},[785],{"type":70,"value":786}," Outlet",{"type":64,"tag":223,"props":788,"children":789},{"style":365},[790],{"type":70,"value":379},{"type":64,"tag":223,"props":792,"children":793},{"style":359},[794],{"type":70,"value":384},{"type":64,"tag":223,"props":796,"children":797},{"style":365},[798],{"type":70,"value":389},{"type":64,"tag":223,"props":800,"children":801},{"style":236},[802],{"type":70,"value":803},"@tanstack\u002Freact-router",{"type":64,"tag":223,"props":805,"children":806},{"style":365},[807],{"type":70,"value":399},{"type":64,"tag":223,"props":809,"children":810},{"class":225,"line":402},[811,815,819,824,828,832,836,841],{"type":64,"tag":223,"props":812,"children":813},{"style":359},[814],{"type":70,"value":362},{"type":64,"tag":223,"props":816,"children":817},{"style":365},[818],{"type":70,"value":368},{"type":64,"tag":223,"props":820,"children":821},{"style":371},[822],{"type":70,"value":823}," TanStackRouterDevtools",{"type":64,"tag":223,"props":825,"children":826},{"style":365},[827],{"type":70,"value":379},{"type":64,"tag":223,"props":829,"children":830},{"style":359},[831],{"type":70,"value":384},{"type":64,"tag":223,"props":833,"children":834},{"style":365},[835],{"type":70,"value":389},{"type":64,"tag":223,"props":837,"children":838},{"style":236},[839],{"type":70,"value":840},"@tanstack\u002Freact-router-devtools",{"type":64,"tag":223,"props":842,"children":843},{"style":365},[844],{"type":70,"value":399},{"type":64,"tag":223,"props":846,"children":847},{"class":225,"line":433},[848],{"type":64,"tag":223,"props":849,"children":850},{"emptyLinePlaceholder":201},[851],{"type":70,"value":477},{"type":64,"tag":223,"props":853,"children":854},{"class":225,"line":471},[855,859,865,870,875,879,883],{"type":64,"tag":223,"props":856,"children":857},{"style":359},[858],{"type":70,"value":486},{"type":64,"tag":223,"props":860,"children":862},{"style":861},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[863],{"type":70,"value":864}," const",{"type":64,"tag":223,"props":866,"children":867},{"style":371},[868],{"type":70,"value":869}," Route ",{"type":64,"tag":223,"props":871,"children":872},{"style":365},[873],{"type":70,"value":874},"=",{"type":64,"tag":223,"props":876,"children":877},{"style":494},[878],{"type":70,"value":768},{"type":64,"tag":223,"props":880,"children":881},{"style":371},[882],{"type":70,"value":501},{"type":64,"tag":223,"props":884,"children":885},{"style":365},[886],{"type":70,"value":506},{"type":64,"tag":223,"props":888,"children":889},{"class":225,"line":480},[890,895,899,904,909],{"type":64,"tag":223,"props":891,"children":892},{"style":494},[893],{"type":70,"value":894},"  component",{"type":64,"tag":223,"props":896,"children":897},{"style":365},[898],{"type":70,"value":521},{"type":64,"tag":223,"props":900,"children":901},{"style":365},[902],{"type":70,"value":903}," ()",{"type":64,"tag":223,"props":905,"children":906},{"style":861},[907],{"type":70,"value":908}," =>",{"type":64,"tag":223,"props":910,"children":911},{"style":371},[912],{"type":70,"value":913}," (\n",{"type":64,"tag":223,"props":915,"children":916},{"class":225,"line":509},[917],{"type":64,"tag":223,"props":918,"children":919},{"style":365},[920],{"type":70,"value":921},"    \u003C>\n",{"type":64,"tag":223,"props":923,"children":924},{"class":225,"line":529},[925,930,935],{"type":64,"tag":223,"props":926,"children":927},{"style":365},[928],{"type":70,"value":929},"      \u003C",{"type":64,"tag":223,"props":931,"children":932},{"style":513},[933],{"type":70,"value":934},"nav",{"type":64,"tag":223,"props":936,"children":937},{"style":365},[938],{"type":70,"value":939},">\n",{"type":64,"tag":223,"props":941,"children":942},{"class":225,"line":603},[943,948,953,958,962,967,972,976,981,986,991,995],{"type":64,"tag":223,"props":944,"children":945},{"style":365},[946],{"type":70,"value":947},"        \u003C",{"type":64,"tag":223,"props":949,"children":950},{"style":230},[951],{"type":70,"value":952},"Link",{"type":64,"tag":223,"props":954,"children":955},{"style":861},[956],{"type":70,"value":957}," to",{"type":64,"tag":223,"props":959,"children":960},{"style":365},[961],{"type":70,"value":874},{"type":64,"tag":223,"props":963,"children":964},{"style":365},[965],{"type":70,"value":966},"\"",{"type":64,"tag":223,"props":968,"children":969},{"style":236},[970],{"type":70,"value":971},"\u002F",{"type":64,"tag":223,"props":973,"children":974},{"style":365},[975],{"type":70,"value":966},{"type":64,"tag":223,"props":977,"children":978},{"style":365},[979],{"type":70,"value":980},">",{"type":64,"tag":223,"props":982,"children":983},{"style":371},[984],{"type":70,"value":985},"Home",{"type":64,"tag":223,"props":987,"children":988},{"style":365},[989],{"type":70,"value":990},"\u003C\u002F",{"type":64,"tag":223,"props":992,"children":993},{"style":230},[994],{"type":70,"value":952},{"type":64,"tag":223,"props":996,"children":997},{"style":365},[998],{"type":70,"value":939},{"type":64,"tag":223,"props":1000,"children":1001},{"class":225,"line":621},[1002,1006,1010,1014,1018,1022,1027,1031,1035,1040,1044,1048],{"type":64,"tag":223,"props":1003,"children":1004},{"style":365},[1005],{"type":70,"value":947},{"type":64,"tag":223,"props":1007,"children":1008},{"style":230},[1009],{"type":70,"value":952},{"type":64,"tag":223,"props":1011,"children":1012},{"style":861},[1013],{"type":70,"value":957},{"type":64,"tag":223,"props":1015,"children":1016},{"style":365},[1017],{"type":70,"value":874},{"type":64,"tag":223,"props":1019,"children":1020},{"style":365},[1021],{"type":70,"value":966},{"type":64,"tag":223,"props":1023,"children":1024},{"style":236},[1025],{"type":70,"value":1026},"\u002Fabout",{"type":64,"tag":223,"props":1028,"children":1029},{"style":365},[1030],{"type":70,"value":966},{"type":64,"tag":223,"props":1032,"children":1033},{"style":365},[1034],{"type":70,"value":980},{"type":64,"tag":223,"props":1036,"children":1037},{"style":371},[1038],{"type":70,"value":1039},"About",{"type":64,"tag":223,"props":1041,"children":1042},{"style":365},[1043],{"type":70,"value":990},{"type":64,"tag":223,"props":1045,"children":1046},{"style":230},[1047],{"type":70,"value":952},{"type":64,"tag":223,"props":1049,"children":1050},{"style":365},[1051],{"type":70,"value":939},{"type":64,"tag":223,"props":1053,"children":1054},{"class":225,"line":634},[1055,1060,1064],{"type":64,"tag":223,"props":1056,"children":1057},{"style":365},[1058],{"type":70,"value":1059},"      \u003C\u002F",{"type":64,"tag":223,"props":1061,"children":1062},{"style":513},[1063],{"type":70,"value":934},{"type":64,"tag":223,"props":1065,"children":1066},{"style":365},[1067],{"type":70,"value":939},{"type":64,"tag":223,"props":1069,"children":1071},{"class":225,"line":1070},12,[1072,1076,1081],{"type":64,"tag":223,"props":1073,"children":1074},{"style":365},[1075],{"type":70,"value":929},{"type":64,"tag":223,"props":1077,"children":1078},{"style":230},[1079],{"type":70,"value":1080},"Outlet",{"type":64,"tag":223,"props":1082,"children":1083},{"style":365},[1084],{"type":70,"value":1085}," \u002F>\n",{"type":64,"tag":223,"props":1087,"children":1089},{"class":225,"line":1088},13,[1090,1094,1099],{"type":64,"tag":223,"props":1091,"children":1092},{"style":365},[1093],{"type":70,"value":929},{"type":64,"tag":223,"props":1095,"children":1096},{"style":230},[1097],{"type":70,"value":1098},"TanStackRouterDevtools",{"type":64,"tag":223,"props":1100,"children":1101},{"style":365},[1102],{"type":70,"value":1085},{"type":64,"tag":223,"props":1104,"children":1106},{"class":225,"line":1105},14,[1107],{"type":64,"tag":223,"props":1108,"children":1109},{"style":365},[1110],{"type":70,"value":1111},"    \u003C\u002F>\n",{"type":64,"tag":223,"props":1113,"children":1115},{"class":225,"line":1114},15,[1116,1121],{"type":64,"tag":223,"props":1117,"children":1118},{"style":371},[1119],{"type":70,"value":1120},"  )",{"type":64,"tag":223,"props":1122,"children":1123},{"style":365},[1124],{"type":70,"value":600},{"type":64,"tag":223,"props":1126,"children":1128},{"class":225,"line":1127},16,[1129,1133],{"type":64,"tag":223,"props":1130,"children":1131},{"style":365},[1132],{"type":70,"value":640},{"type":64,"tag":223,"props":1134,"children":1135},{"style":371},[1136],{"type":70,"value":645},{"type":64,"tag":187,"props":1138,"children":1140},{"className":1139},[190],[1141],{"type":64,"tag":193,"props":1142,"children":1144},{"className":1143},[196],[1145,1148,1149],{"type":64,"tag":199,"props":1146,"children":1147},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":1150,"children":1151},{},[1152],{"type":70,"value":1153},"Create router instance with type registration",{"type":64,"tag":212,"props":1155,"children":1157},{"className":738,"code":1156,"language":740,"meta":217,"style":217},"\u002F\u002F src\u002Fmain.tsx\nimport { StrictMode } from 'react'\nimport ReactDOM from 'react-dom\u002Fclient'\nimport { RouterProvider, createRouter } from '@tanstack\u002Freact-router'\nimport { routeTree } from '.\u002FrouteTree.gen'\n\nconst router = createRouter({ routeTree })\n\ndeclare module '@tanstack\u002Freact-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nconst rootElement = document.getElementById('root')!\nif (!rootElement.innerHTML) {\n  ReactDOM.createRoot(rootElement).render(\n    \u003CStrictMode>\n      \u003CRouterProvider router={router} \u002F>\n    \u003C\u002FStrictMode>,\n  )\n}\n",[1158],{"type":64,"tag":94,"props":1159,"children":1160},{"__ignoreMap":217},[1161,1169,1205,1234,1279,1316,1323,1365,1372,1402,1419,1441,1449,1457,1464,1520,1556,1600,1618,1650,1668,1677],{"type":64,"tag":223,"props":1162,"children":1163},{"class":225,"line":226},[1164],{"type":64,"tag":223,"props":1165,"children":1166},{"style":350},[1167],{"type":70,"value":1168},"\u002F\u002F src\u002Fmain.tsx\n",{"type":64,"tag":223,"props":1170,"children":1171},{"class":225,"line":299},[1172,1176,1180,1185,1189,1193,1197,1201],{"type":64,"tag":223,"props":1173,"children":1174},{"style":359},[1175],{"type":70,"value":362},{"type":64,"tag":223,"props":1177,"children":1178},{"style":365},[1179],{"type":70,"value":368},{"type":64,"tag":223,"props":1181,"children":1182},{"style":371},[1183],{"type":70,"value":1184}," StrictMode",{"type":64,"tag":223,"props":1186,"children":1187},{"style":365},[1188],{"type":70,"value":379},{"type":64,"tag":223,"props":1190,"children":1191},{"style":359},[1192],{"type":70,"value":384},{"type":64,"tag":223,"props":1194,"children":1195},{"style":365},[1196],{"type":70,"value":389},{"type":64,"tag":223,"props":1198,"children":1199},{"style":236},[1200],{"type":70,"value":32},{"type":64,"tag":223,"props":1202,"children":1203},{"style":365},[1204],{"type":70,"value":399},{"type":64,"tag":223,"props":1206,"children":1207},{"class":225,"line":402},[1208,1212,1217,1221,1225,1230],{"type":64,"tag":223,"props":1209,"children":1210},{"style":359},[1211],{"type":70,"value":362},{"type":64,"tag":223,"props":1213,"children":1214},{"style":371},[1215],{"type":70,"value":1216}," ReactDOM ",{"type":64,"tag":223,"props":1218,"children":1219},{"style":359},[1220],{"type":70,"value":417},{"type":64,"tag":223,"props":1222,"children":1223},{"style":365},[1224],{"type":70,"value":389},{"type":64,"tag":223,"props":1226,"children":1227},{"style":236},[1228],{"type":70,"value":1229},"react-dom\u002Fclient",{"type":64,"tag":223,"props":1231,"children":1232},{"style":365},[1233],{"type":70,"value":399},{"type":64,"tag":223,"props":1235,"children":1236},{"class":225,"line":433},[1237,1241,1245,1250,1254,1259,1263,1267,1271,1275],{"type":64,"tag":223,"props":1238,"children":1239},{"style":359},[1240],{"type":70,"value":362},{"type":64,"tag":223,"props":1242,"children":1243},{"style":365},[1244],{"type":70,"value":368},{"type":64,"tag":223,"props":1246,"children":1247},{"style":371},[1248],{"type":70,"value":1249}," RouterProvider",{"type":64,"tag":223,"props":1251,"children":1252},{"style":365},[1253],{"type":70,"value":571},{"type":64,"tag":223,"props":1255,"children":1256},{"style":371},[1257],{"type":70,"value":1258}," createRouter",{"type":64,"tag":223,"props":1260,"children":1261},{"style":365},[1262],{"type":70,"value":379},{"type":64,"tag":223,"props":1264,"children":1265},{"style":359},[1266],{"type":70,"value":384},{"type":64,"tag":223,"props":1268,"children":1269},{"style":365},[1270],{"type":70,"value":389},{"type":64,"tag":223,"props":1272,"children":1273},{"style":236},[1274],{"type":70,"value":803},{"type":64,"tag":223,"props":1276,"children":1277},{"style":365},[1278],{"type":70,"value":399},{"type":64,"tag":223,"props":1280,"children":1281},{"class":225,"line":471},[1282,1286,1290,1295,1299,1303,1307,1312],{"type":64,"tag":223,"props":1283,"children":1284},{"style":359},[1285],{"type":70,"value":362},{"type":64,"tag":223,"props":1287,"children":1288},{"style":365},[1289],{"type":70,"value":368},{"type":64,"tag":223,"props":1291,"children":1292},{"style":371},[1293],{"type":70,"value":1294}," routeTree",{"type":64,"tag":223,"props":1296,"children":1297},{"style":365},[1298],{"type":70,"value":379},{"type":64,"tag":223,"props":1300,"children":1301},{"style":359},[1302],{"type":70,"value":384},{"type":64,"tag":223,"props":1304,"children":1305},{"style":365},[1306],{"type":70,"value":389},{"type":64,"tag":223,"props":1308,"children":1309},{"style":236},[1310],{"type":70,"value":1311},".\u002FrouteTree.gen",{"type":64,"tag":223,"props":1313,"children":1314},{"style":365},[1315],{"type":70,"value":399},{"type":64,"tag":223,"props":1317,"children":1318},{"class":225,"line":480},[1319],{"type":64,"tag":223,"props":1320,"children":1321},{"emptyLinePlaceholder":201},[1322],{"type":70,"value":477},{"type":64,"tag":223,"props":1324,"children":1325},{"class":225,"line":509},[1326,1331,1336,1340,1344,1348,1352,1357,1361],{"type":64,"tag":223,"props":1327,"children":1328},{"style":861},[1329],{"type":70,"value":1330},"const",{"type":64,"tag":223,"props":1332,"children":1333},{"style":371},[1334],{"type":70,"value":1335}," router ",{"type":64,"tag":223,"props":1337,"children":1338},{"style":365},[1339],{"type":70,"value":874},{"type":64,"tag":223,"props":1341,"children":1342},{"style":494},[1343],{"type":70,"value":1258},{"type":64,"tag":223,"props":1345,"children":1346},{"style":371},[1347],{"type":70,"value":501},{"type":64,"tag":223,"props":1349,"children":1350},{"style":365},[1351],{"type":70,"value":544},{"type":64,"tag":223,"props":1353,"children":1354},{"style":371},[1355],{"type":70,"value":1356}," routeTree ",{"type":64,"tag":223,"props":1358,"children":1359},{"style":365},[1360],{"type":70,"value":640},{"type":64,"tag":223,"props":1362,"children":1363},{"style":371},[1364],{"type":70,"value":645},{"type":64,"tag":223,"props":1366,"children":1367},{"class":225,"line":529},[1368],{"type":64,"tag":223,"props":1369,"children":1370},{"emptyLinePlaceholder":201},[1371],{"type":70,"value":477},{"type":64,"tag":223,"props":1373,"children":1374},{"class":225,"line":603},[1375,1380,1385,1389,1393,1397],{"type":64,"tag":223,"props":1376,"children":1377},{"style":861},[1378],{"type":70,"value":1379},"declare",{"type":64,"tag":223,"props":1381,"children":1382},{"style":861},[1383],{"type":70,"value":1384}," module",{"type":64,"tag":223,"props":1386,"children":1387},{"style":365},[1388],{"type":70,"value":389},{"type":64,"tag":223,"props":1390,"children":1391},{"style":236},[1392],{"type":70,"value":803},{"type":64,"tag":223,"props":1394,"children":1395},{"style":365},[1396],{"type":70,"value":566},{"type":64,"tag":223,"props":1398,"children":1399},{"style":365},[1400],{"type":70,"value":1401}," {\n",{"type":64,"tag":223,"props":1403,"children":1404},{"class":225,"line":621},[1405,1410,1415],{"type":64,"tag":223,"props":1406,"children":1407},{"style":861},[1408],{"type":70,"value":1409},"  interface",{"type":64,"tag":223,"props":1411,"children":1412},{"style":230},[1413],{"type":70,"value":1414}," Register",{"type":64,"tag":223,"props":1416,"children":1417},{"style":365},[1418],{"type":70,"value":1401},{"type":64,"tag":223,"props":1420,"children":1421},{"class":225,"line":634},[1422,1427,1431,1436],{"type":64,"tag":223,"props":1423,"children":1424},{"style":513},[1425],{"type":70,"value":1426},"    router",{"type":64,"tag":223,"props":1428,"children":1429},{"style":365},[1430],{"type":70,"value":521},{"type":64,"tag":223,"props":1432,"children":1433},{"style":365},[1434],{"type":70,"value":1435}," typeof",{"type":64,"tag":223,"props":1437,"children":1438},{"style":371},[1439],{"type":70,"value":1440}," router\n",{"type":64,"tag":223,"props":1442,"children":1443},{"class":225,"line":1070},[1444],{"type":64,"tag":223,"props":1445,"children":1446},{"style":365},[1447],{"type":70,"value":1448},"  }\n",{"type":64,"tag":223,"props":1450,"children":1451},{"class":225,"line":1088},[1452],{"type":64,"tag":223,"props":1453,"children":1454},{"style":365},[1455],{"type":70,"value":1456},"}\n",{"type":64,"tag":223,"props":1458,"children":1459},{"class":225,"line":1105},[1460],{"type":64,"tag":223,"props":1461,"children":1462},{"emptyLinePlaceholder":201},[1463],{"type":70,"value":477},{"type":64,"tag":223,"props":1465,"children":1466},{"class":225,"line":1114},[1467,1471,1476,1480,1485,1490,1495,1499,1503,1507,1511,1515],{"type":64,"tag":223,"props":1468,"children":1469},{"style":861},[1470],{"type":70,"value":1330},{"type":64,"tag":223,"props":1472,"children":1473},{"style":371},[1474],{"type":70,"value":1475}," rootElement ",{"type":64,"tag":223,"props":1477,"children":1478},{"style":365},[1479],{"type":70,"value":874},{"type":64,"tag":223,"props":1481,"children":1482},{"style":371},[1483],{"type":70,"value":1484}," document",{"type":64,"tag":223,"props":1486,"children":1487},{"style":365},[1488],{"type":70,"value":1489},".",{"type":64,"tag":223,"props":1491,"children":1492},{"style":494},[1493],{"type":70,"value":1494},"getElementById",{"type":64,"tag":223,"props":1496,"children":1497},{"style":371},[1498],{"type":70,"value":501},{"type":64,"tag":223,"props":1500,"children":1501},{"style":365},[1502],{"type":70,"value":566},{"type":64,"tag":223,"props":1504,"children":1505},{"style":236},[1506],{"type":70,"value":61},{"type":64,"tag":223,"props":1508,"children":1509},{"style":365},[1510],{"type":70,"value":566},{"type":64,"tag":223,"props":1512,"children":1513},{"style":371},[1514],{"type":70,"value":595},{"type":64,"tag":223,"props":1516,"children":1517},{"style":365},[1518],{"type":70,"value":1519},"!\n",{"type":64,"tag":223,"props":1521,"children":1522},{"class":225,"line":1127},[1523,1528,1533,1538,1543,1547,1552],{"type":64,"tag":223,"props":1524,"children":1525},{"style":359},[1526],{"type":70,"value":1527},"if",{"type":64,"tag":223,"props":1529,"children":1530},{"style":371},[1531],{"type":70,"value":1532}," (",{"type":64,"tag":223,"props":1534,"children":1535},{"style":365},[1536],{"type":70,"value":1537},"!",{"type":64,"tag":223,"props":1539,"children":1540},{"style":371},[1541],{"type":70,"value":1542},"rootElement",{"type":64,"tag":223,"props":1544,"children":1545},{"style":365},[1546],{"type":70,"value":1489},{"type":64,"tag":223,"props":1548,"children":1549},{"style":371},[1550],{"type":70,"value":1551},"innerHTML) ",{"type":64,"tag":223,"props":1553,"children":1554},{"style":365},[1555],{"type":70,"value":506},{"type":64,"tag":223,"props":1557,"children":1559},{"class":225,"line":1558},17,[1560,1565,1569,1574,1578,1582,1586,1590,1595],{"type":64,"tag":223,"props":1561,"children":1562},{"style":371},[1563],{"type":70,"value":1564},"  ReactDOM",{"type":64,"tag":223,"props":1566,"children":1567},{"style":365},[1568],{"type":70,"value":1489},{"type":64,"tag":223,"props":1570,"children":1571},{"style":494},[1572],{"type":70,"value":1573},"createRoot",{"type":64,"tag":223,"props":1575,"children":1576},{"style":513},[1577],{"type":70,"value":501},{"type":64,"tag":223,"props":1579,"children":1580},{"style":371},[1581],{"type":70,"value":1542},{"type":64,"tag":223,"props":1583,"children":1584},{"style":513},[1585],{"type":70,"value":595},{"type":64,"tag":223,"props":1587,"children":1588},{"style":365},[1589],{"type":70,"value":1489},{"type":64,"tag":223,"props":1591,"children":1592},{"style":494},[1593],{"type":70,"value":1594},"render",{"type":64,"tag":223,"props":1596,"children":1597},{"style":513},[1598],{"type":70,"value":1599},"(\n",{"type":64,"tag":223,"props":1601,"children":1603},{"class":225,"line":1602},18,[1604,1609,1614],{"type":64,"tag":223,"props":1605,"children":1606},{"style":365},[1607],{"type":70,"value":1608},"    \u003C",{"type":64,"tag":223,"props":1610,"children":1611},{"style":230},[1612],{"type":70,"value":1613},"StrictMode",{"type":64,"tag":223,"props":1615,"children":1616},{"style":365},[1617],{"type":70,"value":939},{"type":64,"tag":223,"props":1619,"children":1621},{"class":225,"line":1620},19,[1622,1626,1631,1636,1641,1645],{"type":64,"tag":223,"props":1623,"children":1624},{"style":365},[1625],{"type":70,"value":929},{"type":64,"tag":223,"props":1627,"children":1628},{"style":230},[1629],{"type":70,"value":1630},"RouterProvider",{"type":64,"tag":223,"props":1632,"children":1633},{"style":861},[1634],{"type":70,"value":1635}," router",{"type":64,"tag":223,"props":1637,"children":1638},{"style":365},[1639],{"type":70,"value":1640},"={",{"type":64,"tag":223,"props":1642,"children":1643},{"style":371},[1644],{"type":70,"value":34},{"type":64,"tag":223,"props":1646,"children":1647},{"style":365},[1648],{"type":70,"value":1649},"} \u002F>\n",{"type":64,"tag":223,"props":1651,"children":1653},{"class":225,"line":1652},20,[1654,1659,1663],{"type":64,"tag":223,"props":1655,"children":1656},{"style":365},[1657],{"type":70,"value":1658},"    \u003C\u002F",{"type":64,"tag":223,"props":1660,"children":1661},{"style":230},[1662],{"type":70,"value":1613},{"type":64,"tag":223,"props":1664,"children":1665},{"style":365},[1666],{"type":70,"value":1667},">,\n",{"type":64,"tag":223,"props":1669,"children":1671},{"class":225,"line":1670},21,[1672],{"type":64,"tag":223,"props":1673,"children":1674},{"style":513},[1675],{"type":70,"value":1676},"  )\n",{"type":64,"tag":223,"props":1678,"children":1680},{"class":225,"line":1679},22,[1681],{"type":64,"tag":223,"props":1682,"children":1683},{"style":365},[1684],{"type":70,"value":1456},{"type":64,"tag":187,"props":1686,"children":1688},{"className":1687},[190],[1689],{"type":64,"tag":193,"props":1690,"children":1692},{"className":1691},[196],[1693,1696,1697],{"type":64,"tag":199,"props":1694,"children":1695},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":1698,"children":1699},{},[1700,1702],{"type":70,"value":1701},"Convert each route file to ",{"type":64,"tag":94,"props":1703,"children":1705},{"className":1704},[],[1706],{"type":70,"value":1707},"createFileRoute",{"type":64,"tag":73,"props":1709,"children":1710},{},[1711],{"type":70,"value":1712},"React Router:",{"type":64,"tag":212,"props":1714,"children":1716},{"className":738,"code":1715,"language":740,"meta":217,"style":217},"\u002F\u002F Defined in route config array\n{ path: '\u002Fposts', element: \u003CPosts \u002F>, loader: postsLoader }\n",[1717],{"type":64,"tag":94,"props":1718,"children":1719},{"__ignoreMap":217},[1720,1728],{"type":64,"tag":223,"props":1721,"children":1722},{"class":225,"line":226},[1723],{"type":64,"tag":223,"props":1724,"children":1725},{"style":350},[1726],{"type":70,"value":1727},"\u002F\u002F Defined in route config array\n",{"type":64,"tag":223,"props":1729,"children":1730},{"class":225,"line":299},[1731,1735,1740,1744,1748,1753,1757,1761,1766,1770,1775,1780,1785,1790,1794,1799],{"type":64,"tag":223,"props":1732,"children":1733},{"style":365},[1734],{"type":70,"value":544},{"type":64,"tag":223,"props":1736,"children":1737},{"style":230},[1738],{"type":70,"value":1739}," path",{"type":64,"tag":223,"props":1741,"children":1742},{"style":365},[1743],{"type":70,"value":521},{"type":64,"tag":223,"props":1745,"children":1746},{"style":365},[1747],{"type":70,"value":389},{"type":64,"tag":223,"props":1749,"children":1750},{"style":236},[1751],{"type":70,"value":1752},"\u002Fposts",{"type":64,"tag":223,"props":1754,"children":1755},{"style":365},[1756],{"type":70,"value":566},{"type":64,"tag":223,"props":1758,"children":1759},{"style":365},[1760],{"type":70,"value":571},{"type":64,"tag":223,"props":1762,"children":1763},{"style":230},[1764],{"type":70,"value":1765}," element",{"type":64,"tag":223,"props":1767,"children":1768},{"style":365},[1769],{"type":70,"value":521},{"type":64,"tag":223,"props":1771,"children":1772},{"style":365},[1773],{"type":70,"value":1774}," \u003C",{"type":64,"tag":223,"props":1776,"children":1777},{"style":230},[1778],{"type":70,"value":1779},"Posts",{"type":64,"tag":223,"props":1781,"children":1782},{"style":365},[1783],{"type":70,"value":1784}," \u002F>,",{"type":64,"tag":223,"props":1786,"children":1787},{"style":230},[1788],{"type":70,"value":1789}," loader",{"type":64,"tag":223,"props":1791,"children":1792},{"style":365},[1793],{"type":70,"value":521},{"type":64,"tag":223,"props":1795,"children":1796},{"style":371},[1797],{"type":70,"value":1798}," postsLoader",{"type":64,"tag":223,"props":1800,"children":1801},{"style":365},[1802],{"type":70,"value":1803}," }\n",{"type":64,"tag":73,"props":1805,"children":1806},{},[1807],{"type":70,"value":1808},"TanStack Router:",{"type":64,"tag":212,"props":1810,"children":1812},{"className":738,"code":1811,"language":740,"meta":217,"style":217},"\u002F\u002F src\u002Froutes\u002Fposts.tsx\nimport { createFileRoute } from '@tanstack\u002Freact-router'\n\nexport const Route = createFileRoute('\u002Fposts')({\n  loader: async () => {\n    const posts = await fetchPosts()\n    return { posts }\n  },\n  component: PostsPage,\n})\n\nfunction PostsPage() {\n  const { posts } = Route.useLoaderData()\n  return (\n    \u003Cul>\n      {posts.map((p) => (\n        \u003Cli key={p.id}>{p.title}\u003C\u002Fli>\n      ))}\n    \u003C\u002Ful>\n  )\n}\n",[1813],{"type":64,"tag":94,"props":1814,"children":1815},{"__ignoreMap":217},[1816,1824,1860,1867,1915,1944,1977,1997,2005,2025,2036,2043,2063,2105,2117,2132,2179,2243,2255,2270,2277],{"type":64,"tag":223,"props":1817,"children":1818},{"class":225,"line":226},[1819],{"type":64,"tag":223,"props":1820,"children":1821},{"style":350},[1822],{"type":70,"value":1823},"\u002F\u002F src\u002Froutes\u002Fposts.tsx\n",{"type":64,"tag":223,"props":1825,"children":1826},{"class":225,"line":299},[1827,1831,1835,1840,1844,1848,1852,1856],{"type":64,"tag":223,"props":1828,"children":1829},{"style":359},[1830],{"type":70,"value":362},{"type":64,"tag":223,"props":1832,"children":1833},{"style":365},[1834],{"type":70,"value":368},{"type":64,"tag":223,"props":1836,"children":1837},{"style":371},[1838],{"type":70,"value":1839}," createFileRoute",{"type":64,"tag":223,"props":1841,"children":1842},{"style":365},[1843],{"type":70,"value":379},{"type":64,"tag":223,"props":1845,"children":1846},{"style":359},[1847],{"type":70,"value":384},{"type":64,"tag":223,"props":1849,"children":1850},{"style":365},[1851],{"type":70,"value":389},{"type":64,"tag":223,"props":1853,"children":1854},{"style":236},[1855],{"type":70,"value":803},{"type":64,"tag":223,"props":1857,"children":1858},{"style":365},[1859],{"type":70,"value":399},{"type":64,"tag":223,"props":1861,"children":1862},{"class":225,"line":402},[1863],{"type":64,"tag":223,"props":1864,"children":1865},{"emptyLinePlaceholder":201},[1866],{"type":70,"value":477},{"type":64,"tag":223,"props":1868,"children":1869},{"class":225,"line":433},[1870,1874,1878,1882,1886,1890,1894,1898,1902,1906,1911],{"type":64,"tag":223,"props":1871,"children":1872},{"style":359},[1873],{"type":70,"value":486},{"type":64,"tag":223,"props":1875,"children":1876},{"style":861},[1877],{"type":70,"value":864},{"type":64,"tag":223,"props":1879,"children":1880},{"style":371},[1881],{"type":70,"value":869},{"type":64,"tag":223,"props":1883,"children":1884},{"style":365},[1885],{"type":70,"value":874},{"type":64,"tag":223,"props":1887,"children":1888},{"style":494},[1889],{"type":70,"value":1839},{"type":64,"tag":223,"props":1891,"children":1892},{"style":371},[1893],{"type":70,"value":501},{"type":64,"tag":223,"props":1895,"children":1896},{"style":365},[1897],{"type":70,"value":566},{"type":64,"tag":223,"props":1899,"children":1900},{"style":236},[1901],{"type":70,"value":1752},{"type":64,"tag":223,"props":1903,"children":1904},{"style":365},[1905],{"type":70,"value":566},{"type":64,"tag":223,"props":1907,"children":1908},{"style":371},[1909],{"type":70,"value":1910},")(",{"type":64,"tag":223,"props":1912,"children":1913},{"style":365},[1914],{"type":70,"value":506},{"type":64,"tag":223,"props":1916,"children":1917},{"class":225,"line":471},[1918,1923,1927,1932,1936,1940],{"type":64,"tag":223,"props":1919,"children":1920},{"style":494},[1921],{"type":70,"value":1922},"  loader",{"type":64,"tag":223,"props":1924,"children":1925},{"style":365},[1926],{"type":70,"value":521},{"type":64,"tag":223,"props":1928,"children":1929},{"style":861},[1930],{"type":70,"value":1931}," async",{"type":64,"tag":223,"props":1933,"children":1934},{"style":365},[1935],{"type":70,"value":903},{"type":64,"tag":223,"props":1937,"children":1938},{"style":861},[1939],{"type":70,"value":908},{"type":64,"tag":223,"props":1941,"children":1942},{"style":365},[1943],{"type":70,"value":1401},{"type":64,"tag":223,"props":1945,"children":1946},{"class":225,"line":480},[1947,1952,1957,1962,1967,1972],{"type":64,"tag":223,"props":1948,"children":1949},{"style":861},[1950],{"type":70,"value":1951},"    const",{"type":64,"tag":223,"props":1953,"children":1954},{"style":371},[1955],{"type":70,"value":1956}," posts",{"type":64,"tag":223,"props":1958,"children":1959},{"style":365},[1960],{"type":70,"value":1961}," =",{"type":64,"tag":223,"props":1963,"children":1964},{"style":359},[1965],{"type":70,"value":1966}," await",{"type":64,"tag":223,"props":1968,"children":1969},{"style":494},[1970],{"type":70,"value":1971}," fetchPosts",{"type":64,"tag":223,"props":1973,"children":1974},{"style":513},[1975],{"type":70,"value":1976},"()\n",{"type":64,"tag":223,"props":1978,"children":1979},{"class":225,"line":509},[1980,1985,1989,1993],{"type":64,"tag":223,"props":1981,"children":1982},{"style":359},[1983],{"type":70,"value":1984},"    return",{"type":64,"tag":223,"props":1986,"children":1987},{"style":365},[1988],{"type":70,"value":368},{"type":64,"tag":223,"props":1990,"children":1991},{"style":371},[1992],{"type":70,"value":1956},{"type":64,"tag":223,"props":1994,"children":1995},{"style":365},[1996],{"type":70,"value":1803},{"type":64,"tag":223,"props":1998,"children":1999},{"class":225,"line":529},[2000],{"type":64,"tag":223,"props":2001,"children":2002},{"style":365},[2003],{"type":70,"value":2004},"  },\n",{"type":64,"tag":223,"props":2006,"children":2007},{"class":225,"line":603},[2008,2012,2016,2021],{"type":64,"tag":223,"props":2009,"children":2010},{"style":513},[2011],{"type":70,"value":894},{"type":64,"tag":223,"props":2013,"children":2014},{"style":365},[2015],{"type":70,"value":521},{"type":64,"tag":223,"props":2017,"children":2018},{"style":371},[2019],{"type":70,"value":2020}," PostsPage",{"type":64,"tag":223,"props":2022,"children":2023},{"style":365},[2024],{"type":70,"value":600},{"type":64,"tag":223,"props":2026,"children":2027},{"class":225,"line":621},[2028,2032],{"type":64,"tag":223,"props":2029,"children":2030},{"style":365},[2031],{"type":70,"value":640},{"type":64,"tag":223,"props":2033,"children":2034},{"style":371},[2035],{"type":70,"value":645},{"type":64,"tag":223,"props":2037,"children":2038},{"class":225,"line":634},[2039],{"type":64,"tag":223,"props":2040,"children":2041},{"emptyLinePlaceholder":201},[2042],{"type":70,"value":477},{"type":64,"tag":223,"props":2044,"children":2045},{"class":225,"line":1070},[2046,2051,2055,2059],{"type":64,"tag":223,"props":2047,"children":2048},{"style":861},[2049],{"type":70,"value":2050},"function",{"type":64,"tag":223,"props":2052,"children":2053},{"style":494},[2054],{"type":70,"value":2020},{"type":64,"tag":223,"props":2056,"children":2057},{"style":365},[2058],{"type":70,"value":614},{"type":64,"tag":223,"props":2060,"children":2061},{"style":365},[2062],{"type":70,"value":1401},{"type":64,"tag":223,"props":2064,"children":2065},{"class":225,"line":1088},[2066,2071,2075,2079,2083,2087,2092,2096,2101],{"type":64,"tag":223,"props":2067,"children":2068},{"style":861},[2069],{"type":70,"value":2070},"  const",{"type":64,"tag":223,"props":2072,"children":2073},{"style":365},[2074],{"type":70,"value":368},{"type":64,"tag":223,"props":2076,"children":2077},{"style":371},[2078],{"type":70,"value":1956},{"type":64,"tag":223,"props":2080,"children":2081},{"style":365},[2082],{"type":70,"value":379},{"type":64,"tag":223,"props":2084,"children":2085},{"style":365},[2086],{"type":70,"value":1961},{"type":64,"tag":223,"props":2088,"children":2089},{"style":371},[2090],{"type":70,"value":2091}," Route",{"type":64,"tag":223,"props":2093,"children":2094},{"style":365},[2095],{"type":70,"value":1489},{"type":64,"tag":223,"props":2097,"children":2098},{"style":494},[2099],{"type":70,"value":2100},"useLoaderData",{"type":64,"tag":223,"props":2102,"children":2103},{"style":513},[2104],{"type":70,"value":1976},{"type":64,"tag":223,"props":2106,"children":2107},{"class":225,"line":1105},[2108,2113],{"type":64,"tag":223,"props":2109,"children":2110},{"style":359},[2111],{"type":70,"value":2112},"  return",{"type":64,"tag":223,"props":2114,"children":2115},{"style":513},[2116],{"type":70,"value":913},{"type":64,"tag":223,"props":2118,"children":2119},{"class":225,"line":1114},[2120,2124,2128],{"type":64,"tag":223,"props":2121,"children":2122},{"style":365},[2123],{"type":70,"value":1608},{"type":64,"tag":223,"props":2125,"children":2126},{"style":513},[2127],{"type":70,"value":187},{"type":64,"tag":223,"props":2129,"children":2130},{"style":365},[2131],{"type":70,"value":939},{"type":64,"tag":223,"props":2133,"children":2134},{"class":225,"line":1127},[2135,2140,2145,2149,2154,2158,2162,2167,2171,2175],{"type":64,"tag":223,"props":2136,"children":2137},{"style":365},[2138],{"type":70,"value":2139},"      {",{"type":64,"tag":223,"props":2141,"children":2142},{"style":371},[2143],{"type":70,"value":2144},"posts",{"type":64,"tag":223,"props":2146,"children":2147},{"style":365},[2148],{"type":70,"value":1489},{"type":64,"tag":223,"props":2150,"children":2151},{"style":494},[2152],{"type":70,"value":2153},"map",{"type":64,"tag":223,"props":2155,"children":2156},{"style":371},[2157],{"type":70,"value":501},{"type":64,"tag":223,"props":2159,"children":2160},{"style":365},[2161],{"type":70,"value":501},{"type":64,"tag":223,"props":2163,"children":2165},{"style":2164},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[2166],{"type":70,"value":73},{"type":64,"tag":223,"props":2168,"children":2169},{"style":365},[2170],{"type":70,"value":595},{"type":64,"tag":223,"props":2172,"children":2173},{"style":861},[2174],{"type":70,"value":908},{"type":64,"tag":223,"props":2176,"children":2177},{"style":371},[2178],{"type":70,"value":913},{"type":64,"tag":223,"props":2180,"children":2181},{"class":225,"line":1558},[2182,2186,2190,2195,2199,2203,2207,2212,2217,2221,2225,2230,2235,2239],{"type":64,"tag":223,"props":2183,"children":2184},{"style":365},[2185],{"type":70,"value":947},{"type":64,"tag":223,"props":2187,"children":2188},{"style":513},[2189],{"type":70,"value":193},{"type":64,"tag":223,"props":2191,"children":2192},{"style":861},[2193],{"type":70,"value":2194}," key",{"type":64,"tag":223,"props":2196,"children":2197},{"style":365},[2198],{"type":70,"value":1640},{"type":64,"tag":223,"props":2200,"children":2201},{"style":371},[2202],{"type":70,"value":73},{"type":64,"tag":223,"props":2204,"children":2205},{"style":365},[2206],{"type":70,"value":1489},{"type":64,"tag":223,"props":2208,"children":2209},{"style":371},[2210],{"type":70,"value":2211},"id",{"type":64,"tag":223,"props":2213,"children":2214},{"style":365},[2215],{"type":70,"value":2216},"}>{",{"type":64,"tag":223,"props":2218,"children":2219},{"style":371},[2220],{"type":70,"value":73},{"type":64,"tag":223,"props":2222,"children":2223},{"style":365},[2224],{"type":70,"value":1489},{"type":64,"tag":223,"props":2226,"children":2227},{"style":371},[2228],{"type":70,"value":2229},"title",{"type":64,"tag":223,"props":2231,"children":2232},{"style":365},[2233],{"type":70,"value":2234},"}\u003C\u002F",{"type":64,"tag":223,"props":2236,"children":2237},{"style":513},[2238],{"type":70,"value":193},{"type":64,"tag":223,"props":2240,"children":2241},{"style":365},[2242],{"type":70,"value":939},{"type":64,"tag":223,"props":2244,"children":2245},{"class":225,"line":1602},[2246,2251],{"type":64,"tag":223,"props":2247,"children":2248},{"style":371},[2249],{"type":70,"value":2250},"      ))",{"type":64,"tag":223,"props":2252,"children":2253},{"style":365},[2254],{"type":70,"value":1456},{"type":64,"tag":223,"props":2256,"children":2257},{"class":225,"line":1620},[2258,2262,2266],{"type":64,"tag":223,"props":2259,"children":2260},{"style":365},[2261],{"type":70,"value":1658},{"type":64,"tag":223,"props":2263,"children":2264},{"style":513},[2265],{"type":70,"value":187},{"type":64,"tag":223,"props":2267,"children":2268},{"style":365},[2269],{"type":70,"value":939},{"type":64,"tag":223,"props":2271,"children":2272},{"class":225,"line":1652},[2273],{"type":64,"tag":223,"props":2274,"children":2275},{"style":513},[2276],{"type":70,"value":1676},{"type":64,"tag":223,"props":2278,"children":2279},{"class":225,"line":1670},[2280],{"type":64,"tag":223,"props":2281,"children":2282},{"style":365},[2283],{"type":70,"value":1456},{"type":64,"tag":187,"props":2285,"children":2287},{"className":2286},[190],[2288],{"type":64,"tag":193,"props":2289,"children":2291},{"className":2290},[196],[2292,2295,2296],{"type":64,"tag":199,"props":2293,"children":2294},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":2297,"children":2298},{},[2299],{"type":70,"value":2300},"Convert dynamic routes",{"type":64,"tag":73,"props":2302,"children":2303},{},[2304,2305,2311],{"type":70,"value":710},{"type":64,"tag":94,"props":2306,"children":2308},{"className":2307},[],[2309],{"type":70,"value":2310},"\u002Fposts\u002F:postId",{"type":70,"value":2312}," (colon syntax)",{"type":64,"tag":73,"props":2314,"children":2315},{},[2316,2317,2323],{"type":70,"value":729},{"type":64,"tag":94,"props":2318,"children":2320},{"className":2319},[],[2321],{"type":70,"value":2322},"\u002Fposts\u002F$postId",{"type":70,"value":2324}," (dollar syntax)",{"type":64,"tag":212,"props":2326,"children":2328},{"className":738,"code":2327,"language":740,"meta":217,"style":217},"\u002F\u002F src\u002Froutes\u002Fposts\u002F$postId.tsx\nimport { createFileRoute } from '@tanstack\u002Freact-router'\n\nexport const Route = createFileRoute('\u002Fposts\u002F$postId')({\n  loader: async ({ params }) => {\n    const post = await fetchPost(params.postId)\n    return { post }\n  },\n  component: PostPage,\n})\n\nfunction PostPage() {\n  const { post } = Route.useLoaderData()\n  return \u003Carticle>{post.title}\u003C\u002Farticle>\n}\n",[2329],{"type":64,"tag":94,"props":2330,"children":2331},{"__ignoreMap":217},[2332,2340,2375,2382,2429,2467,2513,2532,2539,2559,2570,2577,2596,2635,2681],{"type":64,"tag":223,"props":2333,"children":2334},{"class":225,"line":226},[2335],{"type":64,"tag":223,"props":2336,"children":2337},{"style":350},[2338],{"type":70,"value":2339},"\u002F\u002F src\u002Froutes\u002Fposts\u002F$postId.tsx\n",{"type":64,"tag":223,"props":2341,"children":2342},{"class":225,"line":299},[2343,2347,2351,2355,2359,2363,2367,2371],{"type":64,"tag":223,"props":2344,"children":2345},{"style":359},[2346],{"type":70,"value":362},{"type":64,"tag":223,"props":2348,"children":2349},{"style":365},[2350],{"type":70,"value":368},{"type":64,"tag":223,"props":2352,"children":2353},{"style":371},[2354],{"type":70,"value":1839},{"type":64,"tag":223,"props":2356,"children":2357},{"style":365},[2358],{"type":70,"value":379},{"type":64,"tag":223,"props":2360,"children":2361},{"style":359},[2362],{"type":70,"value":384},{"type":64,"tag":223,"props":2364,"children":2365},{"style":365},[2366],{"type":70,"value":389},{"type":64,"tag":223,"props":2368,"children":2369},{"style":236},[2370],{"type":70,"value":803},{"type":64,"tag":223,"props":2372,"children":2373},{"style":365},[2374],{"type":70,"value":399},{"type":64,"tag":223,"props":2376,"children":2377},{"class":225,"line":402},[2378],{"type":64,"tag":223,"props":2379,"children":2380},{"emptyLinePlaceholder":201},[2381],{"type":70,"value":477},{"type":64,"tag":223,"props":2383,"children":2384},{"class":225,"line":433},[2385,2389,2393,2397,2401,2405,2409,2413,2417,2421,2425],{"type":64,"tag":223,"props":2386,"children":2387},{"style":359},[2388],{"type":70,"value":486},{"type":64,"tag":223,"props":2390,"children":2391},{"style":861},[2392],{"type":70,"value":864},{"type":64,"tag":223,"props":2394,"children":2395},{"style":371},[2396],{"type":70,"value":869},{"type":64,"tag":223,"props":2398,"children":2399},{"style":365},[2400],{"type":70,"value":874},{"type":64,"tag":223,"props":2402,"children":2403},{"style":494},[2404],{"type":70,"value":1839},{"type":64,"tag":223,"props":2406,"children":2407},{"style":371},[2408],{"type":70,"value":501},{"type":64,"tag":223,"props":2410,"children":2411},{"style":365},[2412],{"type":70,"value":566},{"type":64,"tag":223,"props":2414,"children":2415},{"style":236},[2416],{"type":70,"value":2322},{"type":64,"tag":223,"props":2418,"children":2419},{"style":365},[2420],{"type":70,"value":566},{"type":64,"tag":223,"props":2422,"children":2423},{"style":371},[2424],{"type":70,"value":1910},{"type":64,"tag":223,"props":2426,"children":2427},{"style":365},[2428],{"type":70,"value":506},{"type":64,"tag":223,"props":2430,"children":2431},{"class":225,"line":471},[2432,2436,2440,2444,2449,2454,2459,2463],{"type":64,"tag":223,"props":2433,"children":2434},{"style":494},[2435],{"type":70,"value":1922},{"type":64,"tag":223,"props":2437,"children":2438},{"style":365},[2439],{"type":70,"value":521},{"type":64,"tag":223,"props":2441,"children":2442},{"style":861},[2443],{"type":70,"value":1931},{"type":64,"tag":223,"props":2445,"children":2446},{"style":365},[2447],{"type":70,"value":2448}," ({",{"type":64,"tag":223,"props":2450,"children":2451},{"style":2164},[2452],{"type":70,"value":2453}," params",{"type":64,"tag":223,"props":2455,"children":2456},{"style":365},[2457],{"type":70,"value":2458}," })",{"type":64,"tag":223,"props":2460,"children":2461},{"style":861},[2462],{"type":70,"value":908},{"type":64,"tag":223,"props":2464,"children":2465},{"style":365},[2466],{"type":70,"value":1401},{"type":64,"tag":223,"props":2468,"children":2469},{"class":225,"line":480},[2470,2474,2479,2483,2487,2492,2496,2500,2504,2509],{"type":64,"tag":223,"props":2471,"children":2472},{"style":861},[2473],{"type":70,"value":1951},{"type":64,"tag":223,"props":2475,"children":2476},{"style":371},[2477],{"type":70,"value":2478}," post",{"type":64,"tag":223,"props":2480,"children":2481},{"style":365},[2482],{"type":70,"value":1961},{"type":64,"tag":223,"props":2484,"children":2485},{"style":359},[2486],{"type":70,"value":1966},{"type":64,"tag":223,"props":2488,"children":2489},{"style":494},[2490],{"type":70,"value":2491}," fetchPost",{"type":64,"tag":223,"props":2493,"children":2494},{"style":513},[2495],{"type":70,"value":501},{"type":64,"tag":223,"props":2497,"children":2498},{"style":371},[2499],{"type":70,"value":131},{"type":64,"tag":223,"props":2501,"children":2502},{"style":365},[2503],{"type":70,"value":1489},{"type":64,"tag":223,"props":2505,"children":2506},{"style":371},[2507],{"type":70,"value":2508},"postId",{"type":64,"tag":223,"props":2510,"children":2511},{"style":513},[2512],{"type":70,"value":645},{"type":64,"tag":223,"props":2514,"children":2515},{"class":225,"line":509},[2516,2520,2524,2528],{"type":64,"tag":223,"props":2517,"children":2518},{"style":359},[2519],{"type":70,"value":1984},{"type":64,"tag":223,"props":2521,"children":2522},{"style":365},[2523],{"type":70,"value":368},{"type":64,"tag":223,"props":2525,"children":2526},{"style":371},[2527],{"type":70,"value":2478},{"type":64,"tag":223,"props":2529,"children":2530},{"style":365},[2531],{"type":70,"value":1803},{"type":64,"tag":223,"props":2533,"children":2534},{"class":225,"line":529},[2535],{"type":64,"tag":223,"props":2536,"children":2537},{"style":365},[2538],{"type":70,"value":2004},{"type":64,"tag":223,"props":2540,"children":2541},{"class":225,"line":603},[2542,2546,2550,2555],{"type":64,"tag":223,"props":2543,"children":2544},{"style":513},[2545],{"type":70,"value":894},{"type":64,"tag":223,"props":2547,"children":2548},{"style":365},[2549],{"type":70,"value":521},{"type":64,"tag":223,"props":2551,"children":2552},{"style":371},[2553],{"type":70,"value":2554}," PostPage",{"type":64,"tag":223,"props":2556,"children":2557},{"style":365},[2558],{"type":70,"value":600},{"type":64,"tag":223,"props":2560,"children":2561},{"class":225,"line":621},[2562,2566],{"type":64,"tag":223,"props":2563,"children":2564},{"style":365},[2565],{"type":70,"value":640},{"type":64,"tag":223,"props":2567,"children":2568},{"style":371},[2569],{"type":70,"value":645},{"type":64,"tag":223,"props":2571,"children":2572},{"class":225,"line":634},[2573],{"type":64,"tag":223,"props":2574,"children":2575},{"emptyLinePlaceholder":201},[2576],{"type":70,"value":477},{"type":64,"tag":223,"props":2578,"children":2579},{"class":225,"line":1070},[2580,2584,2588,2592],{"type":64,"tag":223,"props":2581,"children":2582},{"style":861},[2583],{"type":70,"value":2050},{"type":64,"tag":223,"props":2585,"children":2586},{"style":494},[2587],{"type":70,"value":2554},{"type":64,"tag":223,"props":2589,"children":2590},{"style":365},[2591],{"type":70,"value":614},{"type":64,"tag":223,"props":2593,"children":2594},{"style":365},[2595],{"type":70,"value":1401},{"type":64,"tag":223,"props":2597,"children":2598},{"class":225,"line":1088},[2599,2603,2607,2611,2615,2619,2623,2627,2631],{"type":64,"tag":223,"props":2600,"children":2601},{"style":861},[2602],{"type":70,"value":2070},{"type":64,"tag":223,"props":2604,"children":2605},{"style":365},[2606],{"type":70,"value":368},{"type":64,"tag":223,"props":2608,"children":2609},{"style":371},[2610],{"type":70,"value":2478},{"type":64,"tag":223,"props":2612,"children":2613},{"style":365},[2614],{"type":70,"value":379},{"type":64,"tag":223,"props":2616,"children":2617},{"style":365},[2618],{"type":70,"value":1961},{"type":64,"tag":223,"props":2620,"children":2621},{"style":371},[2622],{"type":70,"value":2091},{"type":64,"tag":223,"props":2624,"children":2625},{"style":365},[2626],{"type":70,"value":1489},{"type":64,"tag":223,"props":2628,"children":2629},{"style":494},[2630],{"type":70,"value":2100},{"type":64,"tag":223,"props":2632,"children":2633},{"style":513},[2634],{"type":70,"value":1976},{"type":64,"tag":223,"props":2636,"children":2637},{"class":225,"line":1105},[2638,2642,2646,2651,2656,2661,2665,2669,2673,2677],{"type":64,"tag":223,"props":2639,"children":2640},{"style":359},[2641],{"type":70,"value":2112},{"type":64,"tag":223,"props":2643,"children":2644},{"style":365},[2645],{"type":70,"value":1774},{"type":64,"tag":223,"props":2647,"children":2648},{"style":513},[2649],{"type":70,"value":2650},"article",{"type":64,"tag":223,"props":2652,"children":2653},{"style":365},[2654],{"type":70,"value":2655},">{",{"type":64,"tag":223,"props":2657,"children":2658},{"style":371},[2659],{"type":70,"value":2660},"post",{"type":64,"tag":223,"props":2662,"children":2663},{"style":365},[2664],{"type":70,"value":1489},{"type":64,"tag":223,"props":2666,"children":2667},{"style":371},[2668],{"type":70,"value":2229},{"type":64,"tag":223,"props":2670,"children":2671},{"style":365},[2672],{"type":70,"value":2234},{"type":64,"tag":223,"props":2674,"children":2675},{"style":513},[2676],{"type":70,"value":2650},{"type":64,"tag":223,"props":2678,"children":2679},{"style":365},[2680],{"type":70,"value":939},{"type":64,"tag":223,"props":2682,"children":2683},{"class":225,"line":1114},[2684],{"type":64,"tag":223,"props":2685,"children":2686},{"style":365},[2687],{"type":70,"value":1456},{"type":64,"tag":180,"props":2689,"children":2691},{"id":2690},"navigation",[2692],{"type":70,"value":2693},"Navigation",{"type":64,"tag":187,"props":2695,"children":2697},{"className":2696},[190],[2698],{"type":64,"tag":193,"props":2699,"children":2701},{"className":2700},[196],[2702,2705,2706],{"type":64,"tag":199,"props":2703,"children":2704},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":2707,"children":2708},{},[2709,2711,2717],{"type":70,"value":2710},"Convert all ",{"type":64,"tag":94,"props":2712,"children":2714},{"className":2713},[],[2715],{"type":70,"value":2716},"\u003CLink>",{"type":70,"value":2718}," components",{"type":64,"tag":73,"props":2720,"children":2721},{},[2722],{"type":70,"value":1712},{"type":64,"tag":212,"props":2724,"children":2726},{"className":738,"code":2725,"language":740,"meta":217,"style":217},"import { Link } from 'react-router'\n;\u003CLink to={`\u002Fposts\u002F${postId}`}>View Post\u003C\u002FLink>\n",[2727],{"type":64,"tag":94,"props":2728,"children":2729},{"__ignoreMap":217},[2730,2765],{"type":64,"tag":223,"props":2731,"children":2732},{"class":225,"line":226},[2733,2737,2741,2745,2749,2753,2757,2761],{"type":64,"tag":223,"props":2734,"children":2735},{"style":359},[2736],{"type":70,"value":362},{"type":64,"tag":223,"props":2738,"children":2739},{"style":365},[2740],{"type":70,"value":368},{"type":64,"tag":223,"props":2742,"children":2743},{"style":371},[2744],{"type":70,"value":777},{"type":64,"tag":223,"props":2746,"children":2747},{"style":365},[2748],{"type":70,"value":379},{"type":64,"tag":223,"props":2750,"children":2751},{"style":359},[2752],{"type":70,"value":384},{"type":64,"tag":223,"props":2754,"children":2755},{"style":365},[2756],{"type":70,"value":389},{"type":64,"tag":223,"props":2758,"children":2759},{"style":236},[2760],{"type":70,"value":22},{"type":64,"tag":223,"props":2762,"children":2763},{"style":365},[2764],{"type":70,"value":399},{"type":64,"tag":223,"props":2766,"children":2767},{"class":225,"line":299},[2768,2773,2778,2782,2787,2792,2797,2801,2806,2811,2816,2820,2824],{"type":64,"tag":223,"props":2769,"children":2770},{"style":365},[2771],{"type":70,"value":2772},";\u003C",{"type":64,"tag":223,"props":2774,"children":2775},{"style":371},[2776],{"type":70,"value":2777},"Link to",{"type":64,"tag":223,"props":2779,"children":2780},{"style":365},[2781],{"type":70,"value":1640},{"type":64,"tag":223,"props":2783,"children":2784},{"style":365},[2785],{"type":70,"value":2786},"`",{"type":64,"tag":223,"props":2788,"children":2789},{"style":513},[2790],{"type":70,"value":2791},"\u002Fposts\u002F",{"type":64,"tag":223,"props":2793,"children":2794},{"style":365},[2795],{"type":70,"value":2796},"${",{"type":64,"tag":223,"props":2798,"children":2799},{"style":371},[2800],{"type":70,"value":2508},{"type":64,"tag":223,"props":2802,"children":2803},{"style":365},[2804],{"type":70,"value":2805},"}`",{"type":64,"tag":223,"props":2807,"children":2808},{"style":365},[2809],{"type":70,"value":2810},"}>",{"type":64,"tag":223,"props":2812,"children":2813},{"style":371},[2814],{"type":70,"value":2815},"View Post",{"type":64,"tag":223,"props":2817,"children":2818},{"style":365},[2819],{"type":70,"value":990},{"type":64,"tag":223,"props":2821,"children":2822},{"style":371},[2823],{"type":70,"value":952},{"type":64,"tag":223,"props":2825,"children":2826},{"style":365},[2827],{"type":70,"value":939},{"type":64,"tag":73,"props":2829,"children":2830},{},[2831],{"type":70,"value":1808},{"type":64,"tag":212,"props":2833,"children":2835},{"className":738,"code":2834,"language":740,"meta":217,"style":217},"import { Link } from '@tanstack\u002Freact-router'\n;\u003CLink to=\"\u002Fposts\u002F$postId\" params={{ postId }}>\n  View Post\n\u003C\u002FLink>\n",[2836],{"type":64,"tag":94,"props":2837,"children":2838},{"__ignoreMap":217},[2839,2874,2920,2928],{"type":64,"tag":223,"props":2840,"children":2841},{"class":225,"line":226},[2842,2846,2850,2854,2858,2862,2866,2870],{"type":64,"tag":223,"props":2843,"children":2844},{"style":359},[2845],{"type":70,"value":362},{"type":64,"tag":223,"props":2847,"children":2848},{"style":365},[2849],{"type":70,"value":368},{"type":64,"tag":223,"props":2851,"children":2852},{"style":371},[2853],{"type":70,"value":777},{"type":64,"tag":223,"props":2855,"children":2856},{"style":365},[2857],{"type":70,"value":379},{"type":64,"tag":223,"props":2859,"children":2860},{"style":359},[2861],{"type":70,"value":384},{"type":64,"tag":223,"props":2863,"children":2864},{"style":365},[2865],{"type":70,"value":389},{"type":64,"tag":223,"props":2867,"children":2868},{"style":236},[2869],{"type":70,"value":803},{"type":64,"tag":223,"props":2871,"children":2872},{"style":365},[2873],{"type":70,"value":399},{"type":64,"tag":223,"props":2875,"children":2876},{"class":225,"line":299},[2877,2881,2885,2889,2893,2897,2901,2905,2910,2915],{"type":64,"tag":223,"props":2878,"children":2879},{"style":365},[2880],{"type":70,"value":2772},{"type":64,"tag":223,"props":2882,"children":2883},{"style":371},[2884],{"type":70,"value":2777},{"type":64,"tag":223,"props":2886,"children":2887},{"style":365},[2888],{"type":70,"value":874},{"type":64,"tag":223,"props":2890,"children":2891},{"style":365},[2892],{"type":70,"value":966},{"type":64,"tag":223,"props":2894,"children":2895},{"style":236},[2896],{"type":70,"value":2322},{"type":64,"tag":223,"props":2898,"children":2899},{"style":365},[2900],{"type":70,"value":966},{"type":64,"tag":223,"props":2902,"children":2903},{"style":371},[2904],{"type":70,"value":2453},{"type":64,"tag":223,"props":2906,"children":2907},{"style":365},[2908],{"type":70,"value":2909},"={{",{"type":64,"tag":223,"props":2911,"children":2912},{"style":371},[2913],{"type":70,"value":2914}," postId",{"type":64,"tag":223,"props":2916,"children":2917},{"style":365},[2918],{"type":70,"value":2919}," }}>\n",{"type":64,"tag":223,"props":2921,"children":2922},{"class":225,"line":402},[2923],{"type":64,"tag":223,"props":2924,"children":2925},{"style":371},[2926],{"type":70,"value":2927},"  View Post\n",{"type":64,"tag":223,"props":2929,"children":2930},{"class":225,"line":433},[2931,2935,2939],{"type":64,"tag":223,"props":2932,"children":2933},{"style":365},[2934],{"type":70,"value":990},{"type":64,"tag":223,"props":2936,"children":2937},{"style":371},[2938],{"type":70,"value":952},{"type":64,"tag":223,"props":2940,"children":2941},{"style":365},[2942],{"type":70,"value":939},{"type":64,"tag":73,"props":2944,"children":2945},{},[2946],{"type":70,"value":2947},"Key differences:",{"type":64,"tag":187,"props":2949,"children":2951},{"className":2950},[190],[2952,2962,2972,2992],{"type":64,"tag":193,"props":2953,"children":2954},{},[2955,2960],{"type":64,"tag":94,"props":2956,"children":2958},{"className":2957},[],[2959],{"type":70,"value":123},{"type":70,"value":2961}," is a route path pattern, NOT an interpolated string",{"type":64,"tag":193,"props":2963,"children":2964},{},[2965,2970],{"type":64,"tag":94,"props":2966,"children":2968},{"className":2967},[],[2969],{"type":70,"value":131},{"type":70,"value":2971}," is a separate prop with typed values",{"type":64,"tag":193,"props":2973,"children":2974},{},[2975,2977,2983,2984,2990],{"type":70,"value":2976},"Active styling: use ",{"type":64,"tag":94,"props":2978,"children":2980},{"className":2979},[],[2981],{"type":70,"value":2982},"activeProps={{ className: 'font-bold' }}",{"type":70,"value":718},{"type":64,"tag":94,"props":2985,"children":2987},{"className":2986},[],[2988],{"type":70,"value":2989},"data-status=\"active\"",{"type":70,"value":2991}," attribute for CSS",{"type":64,"tag":193,"props":2993,"children":2995},{"className":2994},[196],[2996,2999,3000],{"type":64,"tag":199,"props":2997,"children":2998},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":3001,"children":3002},{},[3003,3004,3010],{"type":70,"value":2710},{"type":64,"tag":94,"props":3005,"children":3007},{"className":3006},[],[3008],{"type":70,"value":3009},"useNavigate",{"type":70,"value":3011}," calls",{"type":64,"tag":73,"props":3013,"children":3014},{},[3015],{"type":70,"value":1712},{"type":64,"tag":212,"props":3017,"children":3019},{"className":738,"code":3018,"language":740,"meta":217,"style":217},"import { useNavigate } from 'react-router'\nconst navigate = useNavigate()\nnavigate(`\u002Fposts\u002F${postId}`)\n",[3020],{"type":64,"tag":94,"props":3021,"children":3022},{"__ignoreMap":217},[3023,3059,3083],{"type":64,"tag":223,"props":3024,"children":3025},{"class":225,"line":226},[3026,3030,3034,3039,3043,3047,3051,3055],{"type":64,"tag":223,"props":3027,"children":3028},{"style":359},[3029],{"type":70,"value":362},{"type":64,"tag":223,"props":3031,"children":3032},{"style":365},[3033],{"type":70,"value":368},{"type":64,"tag":223,"props":3035,"children":3036},{"style":371},[3037],{"type":70,"value":3038}," useNavigate",{"type":64,"tag":223,"props":3040,"children":3041},{"style":365},[3042],{"type":70,"value":379},{"type":64,"tag":223,"props":3044,"children":3045},{"style":359},[3046],{"type":70,"value":384},{"type":64,"tag":223,"props":3048,"children":3049},{"style":365},[3050],{"type":70,"value":389},{"type":64,"tag":223,"props":3052,"children":3053},{"style":236},[3054],{"type":70,"value":22},{"type":64,"tag":223,"props":3056,"children":3057},{"style":365},[3058],{"type":70,"value":399},{"type":64,"tag":223,"props":3060,"children":3061},{"class":225,"line":299},[3062,3066,3071,3075,3079],{"type":64,"tag":223,"props":3063,"children":3064},{"style":861},[3065],{"type":70,"value":1330},{"type":64,"tag":223,"props":3067,"children":3068},{"style":371},[3069],{"type":70,"value":3070}," navigate ",{"type":64,"tag":223,"props":3072,"children":3073},{"style":365},[3074],{"type":70,"value":874},{"type":64,"tag":223,"props":3076,"children":3077},{"style":494},[3078],{"type":70,"value":3038},{"type":64,"tag":223,"props":3080,"children":3081},{"style":371},[3082],{"type":70,"value":1976},{"type":64,"tag":223,"props":3084,"children":3085},{"class":225,"line":402},[3086,3091,3095,3099,3103,3107,3111,3115],{"type":64,"tag":223,"props":3087,"children":3088},{"style":494},[3089],{"type":70,"value":3090},"navigate",{"type":64,"tag":223,"props":3092,"children":3093},{"style":371},[3094],{"type":70,"value":501},{"type":64,"tag":223,"props":3096,"children":3097},{"style":365},[3098],{"type":70,"value":2786},{"type":64,"tag":223,"props":3100,"children":3101},{"style":236},[3102],{"type":70,"value":2791},{"type":64,"tag":223,"props":3104,"children":3105},{"style":365},[3106],{"type":70,"value":2796},{"type":64,"tag":223,"props":3108,"children":3109},{"style":371},[3110],{"type":70,"value":2508},{"type":64,"tag":223,"props":3112,"children":3113},{"style":365},[3114],{"type":70,"value":2805},{"type":64,"tag":223,"props":3116,"children":3117},{"style":371},[3118],{"type":70,"value":645},{"type":64,"tag":73,"props":3120,"children":3121},{},[3122],{"type":70,"value":1808},{"type":64,"tag":212,"props":3124,"children":3126},{"className":738,"code":3125,"language":740,"meta":217,"style":217},"import { useNavigate } from '@tanstack\u002Freact-router'\nconst navigate = useNavigate()\nnavigate({ to: '\u002Fposts\u002F$postId', params: { postId } })\n",[3127],{"type":64,"tag":94,"props":3128,"children":3129},{"__ignoreMap":217},[3130,3165,3188],{"type":64,"tag":223,"props":3131,"children":3132},{"class":225,"line":226},[3133,3137,3141,3145,3149,3153,3157,3161],{"type":64,"tag":223,"props":3134,"children":3135},{"style":359},[3136],{"type":70,"value":362},{"type":64,"tag":223,"props":3138,"children":3139},{"style":365},[3140],{"type":70,"value":368},{"type":64,"tag":223,"props":3142,"children":3143},{"style":371},[3144],{"type":70,"value":3038},{"type":64,"tag":223,"props":3146,"children":3147},{"style":365},[3148],{"type":70,"value":379},{"type":64,"tag":223,"props":3150,"children":3151},{"style":359},[3152],{"type":70,"value":384},{"type":64,"tag":223,"props":3154,"children":3155},{"style":365},[3156],{"type":70,"value":389},{"type":64,"tag":223,"props":3158,"children":3159},{"style":236},[3160],{"type":70,"value":803},{"type":64,"tag":223,"props":3162,"children":3163},{"style":365},[3164],{"type":70,"value":399},{"type":64,"tag":223,"props":3166,"children":3167},{"class":225,"line":299},[3168,3172,3176,3180,3184],{"type":64,"tag":223,"props":3169,"children":3170},{"style":861},[3171],{"type":70,"value":1330},{"type":64,"tag":223,"props":3173,"children":3174},{"style":371},[3175],{"type":70,"value":3070},{"type":64,"tag":223,"props":3177,"children":3178},{"style":365},[3179],{"type":70,"value":874},{"type":64,"tag":223,"props":3181,"children":3182},{"style":494},[3183],{"type":70,"value":3038},{"type":64,"tag":223,"props":3185,"children":3186},{"style":371},[3187],{"type":70,"value":1976},{"type":64,"tag":223,"props":3189,"children":3190},{"class":225,"line":402},[3191,3195,3199,3203,3207,3211,3215,3219,3223,3227,3231,3235,3239,3244,3248,3252],{"type":64,"tag":223,"props":3192,"children":3193},{"style":494},[3194],{"type":70,"value":3090},{"type":64,"tag":223,"props":3196,"children":3197},{"style":371},[3198],{"type":70,"value":501},{"type":64,"tag":223,"props":3200,"children":3201},{"style":365},[3202],{"type":70,"value":544},{"type":64,"tag":223,"props":3204,"children":3205},{"style":513},[3206],{"type":70,"value":957},{"type":64,"tag":223,"props":3208,"children":3209},{"style":365},[3210],{"type":70,"value":521},{"type":64,"tag":223,"props":3212,"children":3213},{"style":365},[3214],{"type":70,"value":389},{"type":64,"tag":223,"props":3216,"children":3217},{"style":236},[3218],{"type":70,"value":2322},{"type":64,"tag":223,"props":3220,"children":3221},{"style":365},[3222],{"type":70,"value":566},{"type":64,"tag":223,"props":3224,"children":3225},{"style":365},[3226],{"type":70,"value":571},{"type":64,"tag":223,"props":3228,"children":3229},{"style":513},[3230],{"type":70,"value":2453},{"type":64,"tag":223,"props":3232,"children":3233},{"style":365},[3234],{"type":70,"value":521},{"type":64,"tag":223,"props":3236,"children":3237},{"style":365},[3238],{"type":70,"value":368},{"type":64,"tag":223,"props":3240,"children":3241},{"style":371},[3242],{"type":70,"value":3243}," postId ",{"type":64,"tag":223,"props":3245,"children":3246},{"style":365},[3247],{"type":70,"value":640},{"type":64,"tag":223,"props":3249,"children":3250},{"style":365},[3251],{"type":70,"value":379},{"type":64,"tag":223,"props":3253,"children":3254},{"style":371},[3255],{"type":70,"value":645},{"type":64,"tag":180,"props":3257,"children":3259},{"id":3258},"search-params",[3260],{"type":70,"value":3261},"Search Params",{"type":64,"tag":187,"props":3263,"children":3265},{"className":3264},[190],[3266],{"type":64,"tag":193,"props":3267,"children":3269},{"className":3268},[196],[3270,3273,3274],{"type":64,"tag":199,"props":3271,"children":3272},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":3275,"children":3276},{},[3277,3279,3285,3287,3293,3294],{"type":70,"value":3278},"Replace ",{"type":64,"tag":94,"props":3280,"children":3282},{"className":3281},[],[3283],{"type":70,"value":3284},"useSearchParams",{"type":70,"value":3286}," with ",{"type":64,"tag":94,"props":3288,"children":3290},{"className":3289},[],[3291],{"type":70,"value":3292},"validateSearch",{"type":70,"value":125},{"type":64,"tag":94,"props":3295,"children":3297},{"className":3296},[],[3298],{"type":70,"value":3299},"useSearch",{"type":64,"tag":73,"props":3301,"children":3302},{},[3303],{"type":70,"value":1712},{"type":64,"tag":212,"props":3305,"children":3307},{"className":738,"code":3306,"language":740,"meta":217,"style":217},"import { useSearchParams } from 'react-router'\n\nfunction Posts() {\n  const [searchParams, setSearchParams] = useSearchParams()\n  const page = Number(searchParams.get('page')) || 1\n\n  const goToPage = (p: number) => setSearchParams({ page: String(p) })\n}\n",[3308],{"type":64,"tag":94,"props":3309,"children":3310},{"__ignoreMap":217},[3311,3347,3354,3374,3417,3488,3495,3582],{"type":64,"tag":223,"props":3312,"children":3313},{"class":225,"line":226},[3314,3318,3322,3327,3331,3335,3339,3343],{"type":64,"tag":223,"props":3315,"children":3316},{"style":359},[3317],{"type":70,"value":362},{"type":64,"tag":223,"props":3319,"children":3320},{"style":365},[3321],{"type":70,"value":368},{"type":64,"tag":223,"props":3323,"children":3324},{"style":371},[3325],{"type":70,"value":3326}," useSearchParams",{"type":64,"tag":223,"props":3328,"children":3329},{"style":365},[3330],{"type":70,"value":379},{"type":64,"tag":223,"props":3332,"children":3333},{"style":359},[3334],{"type":70,"value":384},{"type":64,"tag":223,"props":3336,"children":3337},{"style":365},[3338],{"type":70,"value":389},{"type":64,"tag":223,"props":3340,"children":3341},{"style":236},[3342],{"type":70,"value":22},{"type":64,"tag":223,"props":3344,"children":3345},{"style":365},[3346],{"type":70,"value":399},{"type":64,"tag":223,"props":3348,"children":3349},{"class":225,"line":299},[3350],{"type":64,"tag":223,"props":3351,"children":3352},{"emptyLinePlaceholder":201},[3353],{"type":70,"value":477},{"type":64,"tag":223,"props":3355,"children":3356},{"class":225,"line":402},[3357,3361,3366,3370],{"type":64,"tag":223,"props":3358,"children":3359},{"style":861},[3360],{"type":70,"value":2050},{"type":64,"tag":223,"props":3362,"children":3363},{"style":494},[3364],{"type":70,"value":3365}," Posts",{"type":64,"tag":223,"props":3367,"children":3368},{"style":365},[3369],{"type":70,"value":614},{"type":64,"tag":223,"props":3371,"children":3372},{"style":365},[3373],{"type":70,"value":1401},{"type":64,"tag":223,"props":3375,"children":3376},{"class":225,"line":433},[3377,3381,3386,3391,3395,3400,3405,3409,3413],{"type":64,"tag":223,"props":3378,"children":3379},{"style":861},[3380],{"type":70,"value":2070},{"type":64,"tag":223,"props":3382,"children":3383},{"style":365},[3384],{"type":70,"value":3385}," [",{"type":64,"tag":223,"props":3387,"children":3388},{"style":371},[3389],{"type":70,"value":3390},"searchParams",{"type":64,"tag":223,"props":3392,"children":3393},{"style":365},[3394],{"type":70,"value":571},{"type":64,"tag":223,"props":3396,"children":3397},{"style":371},[3398],{"type":70,"value":3399}," setSearchParams",{"type":64,"tag":223,"props":3401,"children":3402},{"style":365},[3403],{"type":70,"value":3404},"]",{"type":64,"tag":223,"props":3406,"children":3407},{"style":365},[3408],{"type":70,"value":1961},{"type":64,"tag":223,"props":3410,"children":3411},{"style":494},[3412],{"type":70,"value":3326},{"type":64,"tag":223,"props":3414,"children":3415},{"style":513},[3416],{"type":70,"value":1976},{"type":64,"tag":223,"props":3418,"children":3419},{"class":225,"line":471},[3420,3424,3429,3433,3438,3442,3446,3450,3455,3459,3463,3468,3472,3477,3482],{"type":64,"tag":223,"props":3421,"children":3422},{"style":861},[3423],{"type":70,"value":2070},{"type":64,"tag":223,"props":3425,"children":3426},{"style":371},[3427],{"type":70,"value":3428}," page",{"type":64,"tag":223,"props":3430,"children":3431},{"style":365},[3432],{"type":70,"value":1961},{"type":64,"tag":223,"props":3434,"children":3435},{"style":494},[3436],{"type":70,"value":3437}," Number",{"type":64,"tag":223,"props":3439,"children":3440},{"style":513},[3441],{"type":70,"value":501},{"type":64,"tag":223,"props":3443,"children":3444},{"style":371},[3445],{"type":70,"value":3390},{"type":64,"tag":223,"props":3447,"children":3448},{"style":365},[3449],{"type":70,"value":1489},{"type":64,"tag":223,"props":3451,"children":3452},{"style":494},[3453],{"type":70,"value":3454},"get",{"type":64,"tag":223,"props":3456,"children":3457},{"style":513},[3458],{"type":70,"value":501},{"type":64,"tag":223,"props":3460,"children":3461},{"style":365},[3462],{"type":70,"value":566},{"type":64,"tag":223,"props":3464,"children":3465},{"style":236},[3466],{"type":70,"value":3467},"page",{"type":64,"tag":223,"props":3469,"children":3470},{"style":365},[3471],{"type":70,"value":566},{"type":64,"tag":223,"props":3473,"children":3474},{"style":513},[3475],{"type":70,"value":3476},")) ",{"type":64,"tag":223,"props":3478,"children":3479},{"style":365},[3480],{"type":70,"value":3481},"||",{"type":64,"tag":223,"props":3483,"children":3485},{"style":3484},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[3486],{"type":70,"value":3487}," 1\n",{"type":64,"tag":223,"props":3489,"children":3490},{"class":225,"line":480},[3491],{"type":64,"tag":223,"props":3492,"children":3493},{"emptyLinePlaceholder":201},[3494],{"type":70,"value":477},{"type":64,"tag":223,"props":3496,"children":3497},{"class":225,"line":509},[3498,3502,3507,3511,3515,3519,3523,3528,3532,3536,3540,3544,3548,3552,3556,3561,3565,3569,3574,3578],{"type":64,"tag":223,"props":3499,"children":3500},{"style":861},[3501],{"type":70,"value":2070},{"type":64,"tag":223,"props":3503,"children":3504},{"style":371},[3505],{"type":70,"value":3506}," goToPage",{"type":64,"tag":223,"props":3508,"children":3509},{"style":365},[3510],{"type":70,"value":1961},{"type":64,"tag":223,"props":3512,"children":3513},{"style":365},[3514],{"type":70,"value":1532},{"type":64,"tag":223,"props":3516,"children":3517},{"style":2164},[3518],{"type":70,"value":73},{"type":64,"tag":223,"props":3520,"children":3521},{"style":365},[3522],{"type":70,"value":521},{"type":64,"tag":223,"props":3524,"children":3525},{"style":230},[3526],{"type":70,"value":3527}," number",{"type":64,"tag":223,"props":3529,"children":3530},{"style":365},[3531],{"type":70,"value":595},{"type":64,"tag":223,"props":3533,"children":3534},{"style":861},[3535],{"type":70,"value":908},{"type":64,"tag":223,"props":3537,"children":3538},{"style":494},[3539],{"type":70,"value":3399},{"type":64,"tag":223,"props":3541,"children":3542},{"style":513},[3543],{"type":70,"value":501},{"type":64,"tag":223,"props":3545,"children":3546},{"style":365},[3547],{"type":70,"value":544},{"type":64,"tag":223,"props":3549,"children":3550},{"style":513},[3551],{"type":70,"value":3428},{"type":64,"tag":223,"props":3553,"children":3554},{"style":365},[3555],{"type":70,"value":521},{"type":64,"tag":223,"props":3557,"children":3558},{"style":494},[3559],{"type":70,"value":3560}," String",{"type":64,"tag":223,"props":3562,"children":3563},{"style":513},[3564],{"type":70,"value":501},{"type":64,"tag":223,"props":3566,"children":3567},{"style":371},[3568],{"type":70,"value":73},{"type":64,"tag":223,"props":3570,"children":3571},{"style":513},[3572],{"type":70,"value":3573},") ",{"type":64,"tag":223,"props":3575,"children":3576},{"style":365},[3577],{"type":70,"value":640},{"type":64,"tag":223,"props":3579,"children":3580},{"style":513},[3581],{"type":70,"value":645},{"type":64,"tag":223,"props":3583,"children":3584},{"class":225,"line":529},[3585],{"type":64,"tag":223,"props":3586,"children":3587},{"style":365},[3588],{"type":70,"value":1456},{"type":64,"tag":73,"props":3590,"children":3591},{},[3592],{"type":70,"value":1808},{"type":64,"tag":212,"props":3594,"children":3596},{"className":738,"code":3595,"language":740,"meta":217,"style":217},"\u002F\u002F In the route definition:\nimport { createFileRoute } from '@tanstack\u002Freact-router'\nimport { z } from 'zod'\n\nexport const Route = createFileRoute('\u002Fposts')({\n  validateSearch: z.object({\n    page: z.number().default(1).catch(1),\n  }),\n  component: Posts,\n})\n\n\u002F\u002F In the component:\nimport { useNavigate } from '@tanstack\u002Freact-router'\n\nfunction Posts() {\n  const { page } = Route.useSearch()\n  const navigate = useNavigate({ from: '\u002Fposts' })\n\n  const goToPage = (p: number) => {\n    navigate({ search: (prev) => ({ ...prev, page: p }) })\n  }\n}\n",[3597],{"type":64,"tag":94,"props":3598,"children":3599},{"__ignoreMap":217},[3600,3608,3643,3680,3687,3734,3767,3843,3859,3878,3889,3896,3904,3939,3946,3965,4004,4060,4067,4110,4202,4209],{"type":64,"tag":223,"props":3601,"children":3602},{"class":225,"line":226},[3603],{"type":64,"tag":223,"props":3604,"children":3605},{"style":350},[3606],{"type":70,"value":3607},"\u002F\u002F In the route definition:\n",{"type":64,"tag":223,"props":3609,"children":3610},{"class":225,"line":299},[3611,3615,3619,3623,3627,3631,3635,3639],{"type":64,"tag":223,"props":3612,"children":3613},{"style":359},[3614],{"type":70,"value":362},{"type":64,"tag":223,"props":3616,"children":3617},{"style":365},[3618],{"type":70,"value":368},{"type":64,"tag":223,"props":3620,"children":3621},{"style":371},[3622],{"type":70,"value":1839},{"type":64,"tag":223,"props":3624,"children":3625},{"style":365},[3626],{"type":70,"value":379},{"type":64,"tag":223,"props":3628,"children":3629},{"style":359},[3630],{"type":70,"value":384},{"type":64,"tag":223,"props":3632,"children":3633},{"style":365},[3634],{"type":70,"value":389},{"type":64,"tag":223,"props":3636,"children":3637},{"style":236},[3638],{"type":70,"value":803},{"type":64,"tag":223,"props":3640,"children":3641},{"style":365},[3642],{"type":70,"value":399},{"type":64,"tag":223,"props":3644,"children":3645},{"class":225,"line":402},[3646,3650,3654,3659,3663,3667,3671,3676],{"type":64,"tag":223,"props":3647,"children":3648},{"style":359},[3649],{"type":70,"value":362},{"type":64,"tag":223,"props":3651,"children":3652},{"style":365},[3653],{"type":70,"value":368},{"type":64,"tag":223,"props":3655,"children":3656},{"style":371},[3657],{"type":70,"value":3658}," z",{"type":64,"tag":223,"props":3660,"children":3661},{"style":365},[3662],{"type":70,"value":379},{"type":64,"tag":223,"props":3664,"children":3665},{"style":359},[3666],{"type":70,"value":384},{"type":64,"tag":223,"props":3668,"children":3669},{"style":365},[3670],{"type":70,"value":389},{"type":64,"tag":223,"props":3672,"children":3673},{"style":236},[3674],{"type":70,"value":3675},"zod",{"type":64,"tag":223,"props":3677,"children":3678},{"style":365},[3679],{"type":70,"value":399},{"type":64,"tag":223,"props":3681,"children":3682},{"class":225,"line":433},[3683],{"type":64,"tag":223,"props":3684,"children":3685},{"emptyLinePlaceholder":201},[3686],{"type":70,"value":477},{"type":64,"tag":223,"props":3688,"children":3689},{"class":225,"line":471},[3690,3694,3698,3702,3706,3710,3714,3718,3722,3726,3730],{"type":64,"tag":223,"props":3691,"children":3692},{"style":359},[3693],{"type":70,"value":486},{"type":64,"tag":223,"props":3695,"children":3696},{"style":861},[3697],{"type":70,"value":864},{"type":64,"tag":223,"props":3699,"children":3700},{"style":371},[3701],{"type":70,"value":869},{"type":64,"tag":223,"props":3703,"children":3704},{"style":365},[3705],{"type":70,"value":874},{"type":64,"tag":223,"props":3707,"children":3708},{"style":494},[3709],{"type":70,"value":1839},{"type":64,"tag":223,"props":3711,"children":3712},{"style":371},[3713],{"type":70,"value":501},{"type":64,"tag":223,"props":3715,"children":3716},{"style":365},[3717],{"type":70,"value":566},{"type":64,"tag":223,"props":3719,"children":3720},{"style":236},[3721],{"type":70,"value":1752},{"type":64,"tag":223,"props":3723,"children":3724},{"style":365},[3725],{"type":70,"value":566},{"type":64,"tag":223,"props":3727,"children":3728},{"style":371},[3729],{"type":70,"value":1910},{"type":64,"tag":223,"props":3731,"children":3732},{"style":365},[3733],{"type":70,"value":506},{"type":64,"tag":223,"props":3735,"children":3736},{"class":225,"line":480},[3737,3742,3746,3750,3754,3759,3763],{"type":64,"tag":223,"props":3738,"children":3739},{"style":513},[3740],{"type":70,"value":3741},"  validateSearch",{"type":64,"tag":223,"props":3743,"children":3744},{"style":365},[3745],{"type":70,"value":521},{"type":64,"tag":223,"props":3747,"children":3748},{"style":371},[3749],{"type":70,"value":3658},{"type":64,"tag":223,"props":3751,"children":3752},{"style":365},[3753],{"type":70,"value":1489},{"type":64,"tag":223,"props":3755,"children":3756},{"style":494},[3757],{"type":70,"value":3758},"object",{"type":64,"tag":223,"props":3760,"children":3761},{"style":371},[3762],{"type":70,"value":501},{"type":64,"tag":223,"props":3764,"children":3765},{"style":365},[3766],{"type":70,"value":506},{"type":64,"tag":223,"props":3768,"children":3769},{"class":225,"line":509},[3770,3775,3779,3783,3787,3792,3796,3800,3805,3809,3814,3818,3822,3827,3831,3835,3839],{"type":64,"tag":223,"props":3771,"children":3772},{"style":513},[3773],{"type":70,"value":3774},"    page",{"type":64,"tag":223,"props":3776,"children":3777},{"style":365},[3778],{"type":70,"value":521},{"type":64,"tag":223,"props":3780,"children":3781},{"style":371},[3782],{"type":70,"value":3658},{"type":64,"tag":223,"props":3784,"children":3785},{"style":365},[3786],{"type":70,"value":1489},{"type":64,"tag":223,"props":3788,"children":3789},{"style":494},[3790],{"type":70,"value":3791},"number",{"type":64,"tag":223,"props":3793,"children":3794},{"style":371},[3795],{"type":70,"value":614},{"type":64,"tag":223,"props":3797,"children":3798},{"style":365},[3799],{"type":70,"value":1489},{"type":64,"tag":223,"props":3801,"children":3802},{"style":494},[3803],{"type":70,"value":3804},"default",{"type":64,"tag":223,"props":3806,"children":3807},{"style":371},[3808],{"type":70,"value":501},{"type":64,"tag":223,"props":3810,"children":3811},{"style":3484},[3812],{"type":70,"value":3813},"1",{"type":64,"tag":223,"props":3815,"children":3816},{"style":371},[3817],{"type":70,"value":595},{"type":64,"tag":223,"props":3819,"children":3820},{"style":365},[3821],{"type":70,"value":1489},{"type":64,"tag":223,"props":3823,"children":3824},{"style":494},[3825],{"type":70,"value":3826},"catch",{"type":64,"tag":223,"props":3828,"children":3829},{"style":371},[3830],{"type":70,"value":501},{"type":64,"tag":223,"props":3832,"children":3833},{"style":3484},[3834],{"type":70,"value":3813},{"type":64,"tag":223,"props":3836,"children":3837},{"style":371},[3838],{"type":70,"value":595},{"type":64,"tag":223,"props":3840,"children":3841},{"style":365},[3842],{"type":70,"value":600},{"type":64,"tag":223,"props":3844,"children":3845},{"class":225,"line":529},[3846,3851,3855],{"type":64,"tag":223,"props":3847,"children":3848},{"style":365},[3849],{"type":70,"value":3850},"  }",{"type":64,"tag":223,"props":3852,"children":3853},{"style":371},[3854],{"type":70,"value":595},{"type":64,"tag":223,"props":3856,"children":3857},{"style":365},[3858],{"type":70,"value":600},{"type":64,"tag":223,"props":3860,"children":3861},{"class":225,"line":603},[3862,3866,3870,3874],{"type":64,"tag":223,"props":3863,"children":3864},{"style":513},[3865],{"type":70,"value":894},{"type":64,"tag":223,"props":3867,"children":3868},{"style":365},[3869],{"type":70,"value":521},{"type":64,"tag":223,"props":3871,"children":3872},{"style":371},[3873],{"type":70,"value":3365},{"type":64,"tag":223,"props":3875,"children":3876},{"style":365},[3877],{"type":70,"value":600},{"type":64,"tag":223,"props":3879,"children":3880},{"class":225,"line":621},[3881,3885],{"type":64,"tag":223,"props":3882,"children":3883},{"style":365},[3884],{"type":70,"value":640},{"type":64,"tag":223,"props":3886,"children":3887},{"style":371},[3888],{"type":70,"value":645},{"type":64,"tag":223,"props":3890,"children":3891},{"class":225,"line":634},[3892],{"type":64,"tag":223,"props":3893,"children":3894},{"emptyLinePlaceholder":201},[3895],{"type":70,"value":477},{"type":64,"tag":223,"props":3897,"children":3898},{"class":225,"line":1070},[3899],{"type":64,"tag":223,"props":3900,"children":3901},{"style":350},[3902],{"type":70,"value":3903},"\u002F\u002F In the component:\n",{"type":64,"tag":223,"props":3905,"children":3906},{"class":225,"line":1088},[3907,3911,3915,3919,3923,3927,3931,3935],{"type":64,"tag":223,"props":3908,"children":3909},{"style":359},[3910],{"type":70,"value":362},{"type":64,"tag":223,"props":3912,"children":3913},{"style":365},[3914],{"type":70,"value":368},{"type":64,"tag":223,"props":3916,"children":3917},{"style":371},[3918],{"type":70,"value":3038},{"type":64,"tag":223,"props":3920,"children":3921},{"style":365},[3922],{"type":70,"value":379},{"type":64,"tag":223,"props":3924,"children":3925},{"style":359},[3926],{"type":70,"value":384},{"type":64,"tag":223,"props":3928,"children":3929},{"style":365},[3930],{"type":70,"value":389},{"type":64,"tag":223,"props":3932,"children":3933},{"style":236},[3934],{"type":70,"value":803},{"type":64,"tag":223,"props":3936,"children":3937},{"style":365},[3938],{"type":70,"value":399},{"type":64,"tag":223,"props":3940,"children":3941},{"class":225,"line":1105},[3942],{"type":64,"tag":223,"props":3943,"children":3944},{"emptyLinePlaceholder":201},[3945],{"type":70,"value":477},{"type":64,"tag":223,"props":3947,"children":3948},{"class":225,"line":1114},[3949,3953,3957,3961],{"type":64,"tag":223,"props":3950,"children":3951},{"style":861},[3952],{"type":70,"value":2050},{"type":64,"tag":223,"props":3954,"children":3955},{"style":494},[3956],{"type":70,"value":3365},{"type":64,"tag":223,"props":3958,"children":3959},{"style":365},[3960],{"type":70,"value":614},{"type":64,"tag":223,"props":3962,"children":3963},{"style":365},[3964],{"type":70,"value":1401},{"type":64,"tag":223,"props":3966,"children":3967},{"class":225,"line":1127},[3968,3972,3976,3980,3984,3988,3992,3996,4000],{"type":64,"tag":223,"props":3969,"children":3970},{"style":861},[3971],{"type":70,"value":2070},{"type":64,"tag":223,"props":3973,"children":3974},{"style":365},[3975],{"type":70,"value":368},{"type":64,"tag":223,"props":3977,"children":3978},{"style":371},[3979],{"type":70,"value":3428},{"type":64,"tag":223,"props":3981,"children":3982},{"style":365},[3983],{"type":70,"value":379},{"type":64,"tag":223,"props":3985,"children":3986},{"style":365},[3987],{"type":70,"value":1961},{"type":64,"tag":223,"props":3989,"children":3990},{"style":371},[3991],{"type":70,"value":2091},{"type":64,"tag":223,"props":3993,"children":3994},{"style":365},[3995],{"type":70,"value":1489},{"type":64,"tag":223,"props":3997,"children":3998},{"style":494},[3999],{"type":70,"value":3299},{"type":64,"tag":223,"props":4001,"children":4002},{"style":513},[4003],{"type":70,"value":1976},{"type":64,"tag":223,"props":4005,"children":4006},{"class":225,"line":1558},[4007,4011,4016,4020,4024,4028,4032,4036,4040,4044,4048,4052,4056],{"type":64,"tag":223,"props":4008,"children":4009},{"style":861},[4010],{"type":70,"value":2070},{"type":64,"tag":223,"props":4012,"children":4013},{"style":371},[4014],{"type":70,"value":4015}," navigate",{"type":64,"tag":223,"props":4017,"children":4018},{"style":365},[4019],{"type":70,"value":1961},{"type":64,"tag":223,"props":4021,"children":4022},{"style":494},[4023],{"type":70,"value":3038},{"type":64,"tag":223,"props":4025,"children":4026},{"style":513},[4027],{"type":70,"value":501},{"type":64,"tag":223,"props":4029,"children":4030},{"style":365},[4031],{"type":70,"value":544},{"type":64,"tag":223,"props":4033,"children":4034},{"style":513},[4035],{"type":70,"value":384},{"type":64,"tag":223,"props":4037,"children":4038},{"style":365},[4039],{"type":70,"value":521},{"type":64,"tag":223,"props":4041,"children":4042},{"style":365},[4043],{"type":70,"value":389},{"type":64,"tag":223,"props":4045,"children":4046},{"style":236},[4047],{"type":70,"value":1752},{"type":64,"tag":223,"props":4049,"children":4050},{"style":365},[4051],{"type":70,"value":566},{"type":64,"tag":223,"props":4053,"children":4054},{"style":365},[4055],{"type":70,"value":379},{"type":64,"tag":223,"props":4057,"children":4058},{"style":513},[4059],{"type":70,"value":645},{"type":64,"tag":223,"props":4061,"children":4062},{"class":225,"line":1602},[4063],{"type":64,"tag":223,"props":4064,"children":4065},{"emptyLinePlaceholder":201},[4066],{"type":70,"value":477},{"type":64,"tag":223,"props":4068,"children":4069},{"class":225,"line":1620},[4070,4074,4078,4082,4086,4090,4094,4098,4102,4106],{"type":64,"tag":223,"props":4071,"children":4072},{"style":861},[4073],{"type":70,"value":2070},{"type":64,"tag":223,"props":4075,"children":4076},{"style":371},[4077],{"type":70,"value":3506},{"type":64,"tag":223,"props":4079,"children":4080},{"style":365},[4081],{"type":70,"value":1961},{"type":64,"tag":223,"props":4083,"children":4084},{"style":365},[4085],{"type":70,"value":1532},{"type":64,"tag":223,"props":4087,"children":4088},{"style":2164},[4089],{"type":70,"value":73},{"type":64,"tag":223,"props":4091,"children":4092},{"style":365},[4093],{"type":70,"value":521},{"type":64,"tag":223,"props":4095,"children":4096},{"style":230},[4097],{"type":70,"value":3527},{"type":64,"tag":223,"props":4099,"children":4100},{"style":365},[4101],{"type":70,"value":595},{"type":64,"tag":223,"props":4103,"children":4104},{"style":861},[4105],{"type":70,"value":908},{"type":64,"tag":223,"props":4107,"children":4108},{"style":365},[4109],{"type":70,"value":1401},{"type":64,"tag":223,"props":4111,"children":4112},{"class":225,"line":1652},[4113,4118,4122,4126,4131,4135,4139,4144,4148,4152,4156,4160,4165,4169,4173,4177,4181,4186,4190,4194,4198],{"type":64,"tag":223,"props":4114,"children":4115},{"style":494},[4116],{"type":70,"value":4117},"    navigate",{"type":64,"tag":223,"props":4119,"children":4120},{"style":513},[4121],{"type":70,"value":501},{"type":64,"tag":223,"props":4123,"children":4124},{"style":365},[4125],{"type":70,"value":544},{"type":64,"tag":223,"props":4127,"children":4128},{"style":494},[4129],{"type":70,"value":4130}," search",{"type":64,"tag":223,"props":4132,"children":4133},{"style":365},[4134],{"type":70,"value":521},{"type":64,"tag":223,"props":4136,"children":4137},{"style":365},[4138],{"type":70,"value":1532},{"type":64,"tag":223,"props":4140,"children":4141},{"style":2164},[4142],{"type":70,"value":4143},"prev",{"type":64,"tag":223,"props":4145,"children":4146},{"style":365},[4147],{"type":70,"value":595},{"type":64,"tag":223,"props":4149,"children":4150},{"style":861},[4151],{"type":70,"value":908},{"type":64,"tag":223,"props":4153,"children":4154},{"style":513},[4155],{"type":70,"value":1532},{"type":64,"tag":223,"props":4157,"children":4158},{"style":365},[4159],{"type":70,"value":544},{"type":64,"tag":223,"props":4161,"children":4162},{"style":365},[4163],{"type":70,"value":4164}," ...",{"type":64,"tag":223,"props":4166,"children":4167},{"style":371},[4168],{"type":70,"value":4143},{"type":64,"tag":223,"props":4170,"children":4171},{"style":365},[4172],{"type":70,"value":571},{"type":64,"tag":223,"props":4174,"children":4175},{"style":513},[4176],{"type":70,"value":3428},{"type":64,"tag":223,"props":4178,"children":4179},{"style":365},[4180],{"type":70,"value":521},{"type":64,"tag":223,"props":4182,"children":4183},{"style":371},[4184],{"type":70,"value":4185}," p",{"type":64,"tag":223,"props":4187,"children":4188},{"style":365},[4189],{"type":70,"value":379},{"type":64,"tag":223,"props":4191,"children":4192},{"style":513},[4193],{"type":70,"value":3573},{"type":64,"tag":223,"props":4195,"children":4196},{"style":365},[4197],{"type":70,"value":640},{"type":64,"tag":223,"props":4199,"children":4200},{"style":513},[4201],{"type":70,"value":645},{"type":64,"tag":223,"props":4203,"children":4204},{"class":225,"line":1670},[4205],{"type":64,"tag":223,"props":4206,"children":4207},{"style":365},[4208],{"type":70,"value":1448},{"type":64,"tag":223,"props":4210,"children":4211},{"class":225,"line":1679},[4212],{"type":64,"tag":223,"props":4213,"children":4214},{"style":365},[4215],{"type":70,"value":1456},{"type":64,"tag":73,"props":4217,"children":4218},{},[4219],{"type":70,"value":2947},{"type":64,"tag":187,"props":4221,"children":4222},{},[4223,4228,4245],{"type":64,"tag":193,"props":4224,"children":4225},{},[4226],{"type":70,"value":4227},"Search params are validated and typed at the route level",{"type":64,"tag":193,"props":4229,"children":4230},{},[4231,4237,4239],{"type":64,"tag":94,"props":4232,"children":4234},{"className":4233},[],[4235],{"type":70,"value":4236},"useSearch()",{"type":70,"value":4238}," returns typed objects, not ",{"type":64,"tag":94,"props":4240,"children":4242},{"className":4241},[],[4243],{"type":70,"value":4244},"URLSearchParams",{"type":64,"tag":193,"props":4246,"children":4247},{},[4248],{"type":70,"value":4249},"Update with function form to preserve other params",{"type":64,"tag":180,"props":4251,"children":4253},{"id":4252},"path-params",[4254],{"type":70,"value":4255},"Path Params",{"type":64,"tag":187,"props":4257,"children":4259},{"className":4258},[190],[4260],{"type":64,"tag":193,"props":4261,"children":4263},{"className":4262},[196],[4264,4267,4268],{"type":64,"tag":199,"props":4265,"children":4266},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":4269,"children":4270},{},[4271,4273,4279,4280,4285],{"type":70,"value":4272},"Update ",{"type":64,"tag":94,"props":4274,"children":4276},{"className":4275},[],[4277],{"type":70,"value":4278},"useParams",{"type":70,"value":3286},{"type":64,"tag":94,"props":4281,"children":4283},{"className":4282},[],[4284],{"type":70,"value":417},{"type":70,"value":4286}," property",{"type":64,"tag":73,"props":4288,"children":4289},{},[4290],{"type":70,"value":1712},{"type":64,"tag":212,"props":4292,"children":4294},{"className":738,"code":4293,"language":740,"meta":217,"style":217},"import { useParams } from 'react-router'\nconst { postId } = useParams()\n",[4295],{"type":64,"tag":94,"props":4296,"children":4297},{"__ignoreMap":217},[4298,4334],{"type":64,"tag":223,"props":4299,"children":4300},{"class":225,"line":226},[4301,4305,4309,4314,4318,4322,4326,4330],{"type":64,"tag":223,"props":4302,"children":4303},{"style":359},[4304],{"type":70,"value":362},{"type":64,"tag":223,"props":4306,"children":4307},{"style":365},[4308],{"type":70,"value":368},{"type":64,"tag":223,"props":4310,"children":4311},{"style":371},[4312],{"type":70,"value":4313}," useParams",{"type":64,"tag":223,"props":4315,"children":4316},{"style":365},[4317],{"type":70,"value":379},{"type":64,"tag":223,"props":4319,"children":4320},{"style":359},[4321],{"type":70,"value":384},{"type":64,"tag":223,"props":4323,"children":4324},{"style":365},[4325],{"type":70,"value":389},{"type":64,"tag":223,"props":4327,"children":4328},{"style":236},[4329],{"type":70,"value":22},{"type":64,"tag":223,"props":4331,"children":4332},{"style":365},[4333],{"type":70,"value":399},{"type":64,"tag":223,"props":4335,"children":4336},{"class":225,"line":299},[4337,4341,4345,4349,4353,4357,4361],{"type":64,"tag":223,"props":4338,"children":4339},{"style":861},[4340],{"type":70,"value":1330},{"type":64,"tag":223,"props":4342,"children":4343},{"style":365},[4344],{"type":70,"value":368},{"type":64,"tag":223,"props":4346,"children":4347},{"style":371},[4348],{"type":70,"value":3243},{"type":64,"tag":223,"props":4350,"children":4351},{"style":365},[4352],{"type":70,"value":640},{"type":64,"tag":223,"props":4354,"children":4355},{"style":365},[4356],{"type":70,"value":1961},{"type":64,"tag":223,"props":4358,"children":4359},{"style":494},[4360],{"type":70,"value":4313},{"type":64,"tag":223,"props":4362,"children":4363},{"style":371},[4364],{"type":70,"value":1976},{"type":64,"tag":73,"props":4366,"children":4367},{},[4368],{"type":70,"value":1808},{"type":64,"tag":212,"props":4370,"children":4372},{"className":738,"code":4371,"language":740,"meta":217,"style":217},"import { useParams } from '@tanstack\u002Freact-router'\nconst { postId } = useParams({ from: '\u002Fposts\u002F$postId' })\n",[4373],{"type":64,"tag":94,"props":4374,"children":4375},{"__ignoreMap":217},[4376,4411],{"type":64,"tag":223,"props":4377,"children":4378},{"class":225,"line":226},[4379,4383,4387,4391,4395,4399,4403,4407],{"type":64,"tag":223,"props":4380,"children":4381},{"style":359},[4382],{"type":70,"value":362},{"type":64,"tag":223,"props":4384,"children":4385},{"style":365},[4386],{"type":70,"value":368},{"type":64,"tag":223,"props":4388,"children":4389},{"style":371},[4390],{"type":70,"value":4313},{"type":64,"tag":223,"props":4392,"children":4393},{"style":365},[4394],{"type":70,"value":379},{"type":64,"tag":223,"props":4396,"children":4397},{"style":359},[4398],{"type":70,"value":384},{"type":64,"tag":223,"props":4400,"children":4401},{"style":365},[4402],{"type":70,"value":389},{"type":64,"tag":223,"props":4404,"children":4405},{"style":236},[4406],{"type":70,"value":803},{"type":64,"tag":223,"props":4408,"children":4409},{"style":365},[4410],{"type":70,"value":399},{"type":64,"tag":223,"props":4412,"children":4413},{"class":225,"line":299},[4414,4418,4422,4426,4430,4434,4438,4442,4446,4450,4454,4458,4462,4466,4470],{"type":64,"tag":223,"props":4415,"children":4416},{"style":861},[4417],{"type":70,"value":1330},{"type":64,"tag":223,"props":4419,"children":4420},{"style":365},[4421],{"type":70,"value":368},{"type":64,"tag":223,"props":4423,"children":4424},{"style":371},[4425],{"type":70,"value":3243},{"type":64,"tag":223,"props":4427,"children":4428},{"style":365},[4429],{"type":70,"value":640},{"type":64,"tag":223,"props":4431,"children":4432},{"style":365},[4433],{"type":70,"value":1961},{"type":64,"tag":223,"props":4435,"children":4436},{"style":494},[4437],{"type":70,"value":4313},{"type":64,"tag":223,"props":4439,"children":4440},{"style":371},[4441],{"type":70,"value":501},{"type":64,"tag":223,"props":4443,"children":4444},{"style":365},[4445],{"type":70,"value":544},{"type":64,"tag":223,"props":4447,"children":4448},{"style":513},[4449],{"type":70,"value":384},{"type":64,"tag":223,"props":4451,"children":4452},{"style":365},[4453],{"type":70,"value":521},{"type":64,"tag":223,"props":4455,"children":4456},{"style":365},[4457],{"type":70,"value":389},{"type":64,"tag":223,"props":4459,"children":4460},{"style":236},[4461],{"type":70,"value":2322},{"type":64,"tag":223,"props":4463,"children":4464},{"style":365},[4465],{"type":70,"value":566},{"type":64,"tag":223,"props":4467,"children":4468},{"style":365},[4469],{"type":70,"value":379},{"type":64,"tag":223,"props":4471,"children":4472},{"style":371},[4473],{"type":70,"value":645},{"type":64,"tag":73,"props":4475,"children":4476},{},[4477],{"type":70,"value":4478},"Or from within the route component:",{"type":64,"tag":212,"props":4480,"children":4482},{"className":738,"code":4481,"language":740,"meta":217,"style":217},"const { postId } = Route.useParams()\n",[4483],{"type":64,"tag":94,"props":4484,"children":4485},{"__ignoreMap":217},[4486],{"type":64,"tag":223,"props":4487,"children":4488},{"class":225,"line":226},[4489,4493,4497,4501,4505,4509,4513,4517,4521],{"type":64,"tag":223,"props":4490,"children":4491},{"style":861},[4492],{"type":70,"value":1330},{"type":64,"tag":223,"props":4494,"children":4495},{"style":365},[4496],{"type":70,"value":368},{"type":64,"tag":223,"props":4498,"children":4499},{"style":371},[4500],{"type":70,"value":3243},{"type":64,"tag":223,"props":4502,"children":4503},{"style":365},[4504],{"type":70,"value":640},{"type":64,"tag":223,"props":4506,"children":4507},{"style":365},[4508],{"type":70,"value":1961},{"type":64,"tag":223,"props":4510,"children":4511},{"style":371},[4512],{"type":70,"value":2091},{"type":64,"tag":223,"props":4514,"children":4515},{"style":365},[4516],{"type":70,"value":1489},{"type":64,"tag":223,"props":4518,"children":4519},{"style":494},[4520],{"type":70,"value":4278},{"type":64,"tag":223,"props":4522,"children":4523},{"style":371},[4524],{"type":70,"value":1976},{"type":64,"tag":180,"props":4526,"children":4528},{"id":4527},"uselocation-common-pitfall",[4529,4535],{"type":64,"tag":94,"props":4530,"children":4532},{"className":4531},[],[4533],{"type":70,"value":4534},"useLocation",{"type":70,"value":4536}," — Common Pitfall",{"type":64,"tag":187,"props":4538,"children":4540},{"className":4539},[190],[4541],{"type":64,"tag":193,"props":4542,"children":4544},{"className":4543},[196],[4545,4548,4549],{"type":64,"tag":199,"props":4546,"children":4547},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":4550,"children":4551},{},[4552,4553,4558],{"type":70,"value":3278},{"type":64,"tag":94,"props":4554,"children":4556},{"className":4555},[],[4557],{"type":70,"value":4534},{"type":70,"value":4559}," with specific hooks",{"type":64,"tag":73,"props":4561,"children":4562},{},[4563,4565,4570,4572,4578,4580,4585,4587,4596],{"type":70,"value":4564},"React Router's ",{"type":64,"tag":94,"props":4566,"children":4568},{"className":4567},[],[4569],{"type":70,"value":4534},{"type":70,"value":4571}," is heavily used, and TanStack Router has a hook with the same name — but they are NOT equivalent. TanStack Router's ",{"type":64,"tag":94,"props":4573,"children":4575},{"className":4574},[],[4576],{"type":70,"value":4577},"useLocation()",{"type":70,"value":4579}," returns the router's current location, which during pending navigations may differ from what's currently rendered. Most React Router ",{"type":64,"tag":94,"props":4581,"children":4583},{"className":4582},[],[4584],{"type":70,"value":4534},{"type":70,"value":4586}," usage should be replaced with more specific hooks. See ",{"type":64,"tag":4588,"props":4589,"children":4593},"a",{"href":4590,"rel":4591},"https:\u002F\u002Fgithub.com\u002FTanStack\u002Frouter\u002Fissues\u002F3110",[4592],"nofollow",[4594],{"type":70,"value":4595},"#3110",{"type":70,"value":1489},{"type":64,"tag":73,"props":4598,"children":4599},{},[4600],{"type":70,"value":4601},"Replace based on what you actually need:",{"type":64,"tag":212,"props":4603,"children":4605},{"className":738,"code":4604,"language":740,"meta":217,"style":217},"\u002F\u002F React Router\nimport { useLocation } from 'react-router'\nconst location = useLocation()\n\n\u002F\u002F ❌ DON'T just swap to TanStack Router's useLocation — it's the \"live\" URL\nimport { useLocation } from '@tanstack\u002Freact-router'\n\n\u002F\u002F ✅ DO use the specific hook for what you need:\nimport {\n  useMatch,\n  useMatches,\n  useParams,\n  useSearch,\n} from '@tanstack\u002Freact-router'\n\n\u002F\u002F Current route match (replaces most useLocation().pathname usage)\nconst match = useMatch({ from: '\u002Fposts\u002F$postId' })\n\n\u002F\u002F All active matches (replaces useLocation for breadcrumbs\u002Fanalytics)\nconst matches = useMatches()\n\n\u002F\u002F Path params (replaces useLocation + manual parsing)\nconst { postId } = useParams({ from: '\u002Fposts\u002F$postId' })\n\n\u002F\u002F Search params (replaces useLocation().search parsing)\nconst { page } = useSearch({ from: '\u002Fposts' })\n",[4606],{"type":64,"tag":94,"props":4607,"children":4608},{"__ignoreMap":217},[4609,4617,4653,4677,4684,4692,4727,4734,4742,4753,4765,4777,4789,4801,4824,4831,4839,4896,4903,4911,4936,4943,4951,5015,5023,5032],{"type":64,"tag":223,"props":4610,"children":4611},{"class":225,"line":226},[4612],{"type":64,"tag":223,"props":4613,"children":4614},{"style":350},[4615],{"type":70,"value":4616},"\u002F\u002F React Router\n",{"type":64,"tag":223,"props":4618,"children":4619},{"class":225,"line":299},[4620,4624,4628,4633,4637,4641,4645,4649],{"type":64,"tag":223,"props":4621,"children":4622},{"style":359},[4623],{"type":70,"value":362},{"type":64,"tag":223,"props":4625,"children":4626},{"style":365},[4627],{"type":70,"value":368},{"type":64,"tag":223,"props":4629,"children":4630},{"style":371},[4631],{"type":70,"value":4632}," useLocation",{"type":64,"tag":223,"props":4634,"children":4635},{"style":365},[4636],{"type":70,"value":379},{"type":64,"tag":223,"props":4638,"children":4639},{"style":359},[4640],{"type":70,"value":384},{"type":64,"tag":223,"props":4642,"children":4643},{"style":365},[4644],{"type":70,"value":389},{"type":64,"tag":223,"props":4646,"children":4647},{"style":236},[4648],{"type":70,"value":22},{"type":64,"tag":223,"props":4650,"children":4651},{"style":365},[4652],{"type":70,"value":399},{"type":64,"tag":223,"props":4654,"children":4655},{"class":225,"line":402},[4656,4660,4665,4669,4673],{"type":64,"tag":223,"props":4657,"children":4658},{"style":861},[4659],{"type":70,"value":1330},{"type":64,"tag":223,"props":4661,"children":4662},{"style":371},[4663],{"type":70,"value":4664}," location ",{"type":64,"tag":223,"props":4666,"children":4667},{"style":365},[4668],{"type":70,"value":874},{"type":64,"tag":223,"props":4670,"children":4671},{"style":494},[4672],{"type":70,"value":4632},{"type":64,"tag":223,"props":4674,"children":4675},{"style":371},[4676],{"type":70,"value":1976},{"type":64,"tag":223,"props":4678,"children":4679},{"class":225,"line":433},[4680],{"type":64,"tag":223,"props":4681,"children":4682},{"emptyLinePlaceholder":201},[4683],{"type":70,"value":477},{"type":64,"tag":223,"props":4685,"children":4686},{"class":225,"line":471},[4687],{"type":64,"tag":223,"props":4688,"children":4689},{"style":350},[4690],{"type":70,"value":4691},"\u002F\u002F ❌ DON'T just swap to TanStack Router's useLocation — it's the \"live\" URL\n",{"type":64,"tag":223,"props":4693,"children":4694},{"class":225,"line":480},[4695,4699,4703,4707,4711,4715,4719,4723],{"type":64,"tag":223,"props":4696,"children":4697},{"style":359},[4698],{"type":70,"value":362},{"type":64,"tag":223,"props":4700,"children":4701},{"style":365},[4702],{"type":70,"value":368},{"type":64,"tag":223,"props":4704,"children":4705},{"style":371},[4706],{"type":70,"value":4632},{"type":64,"tag":223,"props":4708,"children":4709},{"style":365},[4710],{"type":70,"value":379},{"type":64,"tag":223,"props":4712,"children":4713},{"style":359},[4714],{"type":70,"value":384},{"type":64,"tag":223,"props":4716,"children":4717},{"style":365},[4718],{"type":70,"value":389},{"type":64,"tag":223,"props":4720,"children":4721},{"style":236},[4722],{"type":70,"value":803},{"type":64,"tag":223,"props":4724,"children":4725},{"style":365},[4726],{"type":70,"value":399},{"type":64,"tag":223,"props":4728,"children":4729},{"class":225,"line":509},[4730],{"type":64,"tag":223,"props":4731,"children":4732},{"emptyLinePlaceholder":201},[4733],{"type":70,"value":477},{"type":64,"tag":223,"props":4735,"children":4736},{"class":225,"line":529},[4737],{"type":64,"tag":223,"props":4738,"children":4739},{"style":350},[4740],{"type":70,"value":4741},"\u002F\u002F ✅ DO use the specific hook for what you need:\n",{"type":64,"tag":223,"props":4743,"children":4744},{"class":225,"line":603},[4745,4749],{"type":64,"tag":223,"props":4746,"children":4747},{"style":359},[4748],{"type":70,"value":362},{"type":64,"tag":223,"props":4750,"children":4751},{"style":365},[4752],{"type":70,"value":1401},{"type":64,"tag":223,"props":4754,"children":4755},{"class":225,"line":621},[4756,4761],{"type":64,"tag":223,"props":4757,"children":4758},{"style":371},[4759],{"type":70,"value":4760},"  useMatch",{"type":64,"tag":223,"props":4762,"children":4763},{"style":365},[4764],{"type":70,"value":600},{"type":64,"tag":223,"props":4766,"children":4767},{"class":225,"line":634},[4768,4773],{"type":64,"tag":223,"props":4769,"children":4770},{"style":371},[4771],{"type":70,"value":4772},"  useMatches",{"type":64,"tag":223,"props":4774,"children":4775},{"style":365},[4776],{"type":70,"value":600},{"type":64,"tag":223,"props":4778,"children":4779},{"class":225,"line":1070},[4780,4785],{"type":64,"tag":223,"props":4781,"children":4782},{"style":371},[4783],{"type":70,"value":4784},"  useParams",{"type":64,"tag":223,"props":4786,"children":4787},{"style":365},[4788],{"type":70,"value":600},{"type":64,"tag":223,"props":4790,"children":4791},{"class":225,"line":1088},[4792,4797],{"type":64,"tag":223,"props":4793,"children":4794},{"style":371},[4795],{"type":70,"value":4796},"  useSearch",{"type":64,"tag":223,"props":4798,"children":4799},{"style":365},[4800],{"type":70,"value":600},{"type":64,"tag":223,"props":4802,"children":4803},{"class":225,"line":1105},[4804,4808,4812,4816,4820],{"type":64,"tag":223,"props":4805,"children":4806},{"style":365},[4807],{"type":70,"value":640},{"type":64,"tag":223,"props":4809,"children":4810},{"style":359},[4811],{"type":70,"value":384},{"type":64,"tag":223,"props":4813,"children":4814},{"style":365},[4815],{"type":70,"value":389},{"type":64,"tag":223,"props":4817,"children":4818},{"style":236},[4819],{"type":70,"value":803},{"type":64,"tag":223,"props":4821,"children":4822},{"style":365},[4823],{"type":70,"value":399},{"type":64,"tag":223,"props":4825,"children":4826},{"class":225,"line":1114},[4827],{"type":64,"tag":223,"props":4828,"children":4829},{"emptyLinePlaceholder":201},[4830],{"type":70,"value":477},{"type":64,"tag":223,"props":4832,"children":4833},{"class":225,"line":1127},[4834],{"type":64,"tag":223,"props":4835,"children":4836},{"style":350},[4837],{"type":70,"value":4838},"\u002F\u002F Current route match (replaces most useLocation().pathname usage)\n",{"type":64,"tag":223,"props":4840,"children":4841},{"class":225,"line":1558},[4842,4846,4851,4855,4860,4864,4868,4872,4876,4880,4884,4888,4892],{"type":64,"tag":223,"props":4843,"children":4844},{"style":861},[4845],{"type":70,"value":1330},{"type":64,"tag":223,"props":4847,"children":4848},{"style":371},[4849],{"type":70,"value":4850}," match ",{"type":64,"tag":223,"props":4852,"children":4853},{"style":365},[4854],{"type":70,"value":874},{"type":64,"tag":223,"props":4856,"children":4857},{"style":494},[4858],{"type":70,"value":4859}," useMatch",{"type":64,"tag":223,"props":4861,"children":4862},{"style":371},[4863],{"type":70,"value":501},{"type":64,"tag":223,"props":4865,"children":4866},{"style":365},[4867],{"type":70,"value":544},{"type":64,"tag":223,"props":4869,"children":4870},{"style":513},[4871],{"type":70,"value":384},{"type":64,"tag":223,"props":4873,"children":4874},{"style":365},[4875],{"type":70,"value":521},{"type":64,"tag":223,"props":4877,"children":4878},{"style":365},[4879],{"type":70,"value":389},{"type":64,"tag":223,"props":4881,"children":4882},{"style":236},[4883],{"type":70,"value":2322},{"type":64,"tag":223,"props":4885,"children":4886},{"style":365},[4887],{"type":70,"value":566},{"type":64,"tag":223,"props":4889,"children":4890},{"style":365},[4891],{"type":70,"value":379},{"type":64,"tag":223,"props":4893,"children":4894},{"style":371},[4895],{"type":70,"value":645},{"type":64,"tag":223,"props":4897,"children":4898},{"class":225,"line":1602},[4899],{"type":64,"tag":223,"props":4900,"children":4901},{"emptyLinePlaceholder":201},[4902],{"type":70,"value":477},{"type":64,"tag":223,"props":4904,"children":4905},{"class":225,"line":1620},[4906],{"type":64,"tag":223,"props":4907,"children":4908},{"style":350},[4909],{"type":70,"value":4910},"\u002F\u002F All active matches (replaces useLocation for breadcrumbs\u002Fanalytics)\n",{"type":64,"tag":223,"props":4912,"children":4913},{"class":225,"line":1652},[4914,4918,4923,4927,4932],{"type":64,"tag":223,"props":4915,"children":4916},{"style":861},[4917],{"type":70,"value":1330},{"type":64,"tag":223,"props":4919,"children":4920},{"style":371},[4921],{"type":70,"value":4922}," matches ",{"type":64,"tag":223,"props":4924,"children":4925},{"style":365},[4926],{"type":70,"value":874},{"type":64,"tag":223,"props":4928,"children":4929},{"style":494},[4930],{"type":70,"value":4931}," useMatches",{"type":64,"tag":223,"props":4933,"children":4934},{"style":371},[4935],{"type":70,"value":1976},{"type":64,"tag":223,"props":4937,"children":4938},{"class":225,"line":1670},[4939],{"type":64,"tag":223,"props":4940,"children":4941},{"emptyLinePlaceholder":201},[4942],{"type":70,"value":477},{"type":64,"tag":223,"props":4944,"children":4945},{"class":225,"line":1679},[4946],{"type":64,"tag":223,"props":4947,"children":4948},{"style":350},[4949],{"type":70,"value":4950},"\u002F\u002F Path params (replaces useLocation + manual parsing)\n",{"type":64,"tag":223,"props":4952,"children":4954},{"class":225,"line":4953},23,[4955,4959,4963,4967,4971,4975,4979,4983,4987,4991,4995,4999,5003,5007,5011],{"type":64,"tag":223,"props":4956,"children":4957},{"style":861},[4958],{"type":70,"value":1330},{"type":64,"tag":223,"props":4960,"children":4961},{"style":365},[4962],{"type":70,"value":368},{"type":64,"tag":223,"props":4964,"children":4965},{"style":371},[4966],{"type":70,"value":3243},{"type":64,"tag":223,"props":4968,"children":4969},{"style":365},[4970],{"type":70,"value":640},{"type":64,"tag":223,"props":4972,"children":4973},{"style":365},[4974],{"type":70,"value":1961},{"type":64,"tag":223,"props":4976,"children":4977},{"style":494},[4978],{"type":70,"value":4313},{"type":64,"tag":223,"props":4980,"children":4981},{"style":371},[4982],{"type":70,"value":501},{"type":64,"tag":223,"props":4984,"children":4985},{"style":365},[4986],{"type":70,"value":544},{"type":64,"tag":223,"props":4988,"children":4989},{"style":513},[4990],{"type":70,"value":384},{"type":64,"tag":223,"props":4992,"children":4993},{"style":365},[4994],{"type":70,"value":521},{"type":64,"tag":223,"props":4996,"children":4997},{"style":365},[4998],{"type":70,"value":389},{"type":64,"tag":223,"props":5000,"children":5001},{"style":236},[5002],{"type":70,"value":2322},{"type":64,"tag":223,"props":5004,"children":5005},{"style":365},[5006],{"type":70,"value":566},{"type":64,"tag":223,"props":5008,"children":5009},{"style":365},[5010],{"type":70,"value":379},{"type":64,"tag":223,"props":5012,"children":5013},{"style":371},[5014],{"type":70,"value":645},{"type":64,"tag":223,"props":5016,"children":5018},{"class":225,"line":5017},24,[5019],{"type":64,"tag":223,"props":5020,"children":5021},{"emptyLinePlaceholder":201},[5022],{"type":70,"value":477},{"type":64,"tag":223,"props":5024,"children":5026},{"class":225,"line":5025},25,[5027],{"type":64,"tag":223,"props":5028,"children":5029},{"style":350},[5030],{"type":70,"value":5031},"\u002F\u002F Search params (replaces useLocation().search parsing)\n",{"type":64,"tag":223,"props":5033,"children":5035},{"class":225,"line":5034},26,[5036,5040,5044,5049,5053,5057,5062,5066,5070,5074,5078,5082,5086,5090,5094],{"type":64,"tag":223,"props":5037,"children":5038},{"style":861},[5039],{"type":70,"value":1330},{"type":64,"tag":223,"props":5041,"children":5042},{"style":365},[5043],{"type":70,"value":368},{"type":64,"tag":223,"props":5045,"children":5046},{"style":371},[5047],{"type":70,"value":5048}," page ",{"type":64,"tag":223,"props":5050,"children":5051},{"style":365},[5052],{"type":70,"value":640},{"type":64,"tag":223,"props":5054,"children":5055},{"style":365},[5056],{"type":70,"value":1961},{"type":64,"tag":223,"props":5058,"children":5059},{"style":494},[5060],{"type":70,"value":5061}," useSearch",{"type":64,"tag":223,"props":5063,"children":5064},{"style":371},[5065],{"type":70,"value":501},{"type":64,"tag":223,"props":5067,"children":5068},{"style":365},[5069],{"type":70,"value":544},{"type":64,"tag":223,"props":5071,"children":5072},{"style":513},[5073],{"type":70,"value":384},{"type":64,"tag":223,"props":5075,"children":5076},{"style":365},[5077],{"type":70,"value":521},{"type":64,"tag":223,"props":5079,"children":5080},{"style":365},[5081],{"type":70,"value":389},{"type":64,"tag":223,"props":5083,"children":5084},{"style":236},[5085],{"type":70,"value":1752},{"type":64,"tag":223,"props":5087,"children":5088},{"style":365},[5089],{"type":70,"value":566},{"type":64,"tag":223,"props":5091,"children":5092},{"style":365},[5093],{"type":70,"value":379},{"type":64,"tag":223,"props":5095,"children":5096},{"style":371},[5097],{"type":70,"value":645},{"type":64,"tag":180,"props":5099,"children":5101},{"id":5100},"outlet",[5102],{"type":70,"value":1080},{"type":64,"tag":187,"props":5104,"children":5106},{"className":5105},[190],[5107],{"type":64,"tag":193,"props":5108,"children":5110},{"className":5109},[196],[5111,5114,5115],{"type":64,"tag":199,"props":5112,"children":5113},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":5116,"children":5117},{},[5118,5120,5125,5127],{"type":70,"value":5119},"Replace React Router ",{"type":64,"tag":94,"props":5121,"children":5123},{"className":5122},[],[5124],{"type":70,"value":1080},{"type":70,"value":5126}," with TanStack Router ",{"type":64,"tag":94,"props":5128,"children":5130},{"className":5129},[],[5131],{"type":70,"value":1080},{"type":64,"tag":73,"props":5133,"children":5134},{},[5135],{"type":70,"value":5136},"The API is identical — just change the import:",{"type":64,"tag":212,"props":5138,"children":5140},{"className":738,"code":5139,"language":740,"meta":217,"style":217},"\u002F\u002F Before\nimport { Outlet } from 'react-router'\n\n\u002F\u002F After\nimport { Outlet } from '@tanstack\u002Freact-router'\n",[5141],{"type":64,"tag":94,"props":5142,"children":5143},{"__ignoreMap":217},[5144,5152,5187,5194,5202],{"type":64,"tag":223,"props":5145,"children":5146},{"class":225,"line":226},[5147],{"type":64,"tag":223,"props":5148,"children":5149},{"style":350},[5150],{"type":70,"value":5151},"\u002F\u002F Before\n",{"type":64,"tag":223,"props":5153,"children":5154},{"class":225,"line":299},[5155,5159,5163,5167,5171,5175,5179,5183],{"type":64,"tag":223,"props":5156,"children":5157},{"style":359},[5158],{"type":70,"value":362},{"type":64,"tag":223,"props":5160,"children":5161},{"style":365},[5162],{"type":70,"value":368},{"type":64,"tag":223,"props":5164,"children":5165},{"style":371},[5166],{"type":70,"value":786},{"type":64,"tag":223,"props":5168,"children":5169},{"style":365},[5170],{"type":70,"value":379},{"type":64,"tag":223,"props":5172,"children":5173},{"style":359},[5174],{"type":70,"value":384},{"type":64,"tag":223,"props":5176,"children":5177},{"style":365},[5178],{"type":70,"value":389},{"type":64,"tag":223,"props":5180,"children":5181},{"style":236},[5182],{"type":70,"value":22},{"type":64,"tag":223,"props":5184,"children":5185},{"style":365},[5186],{"type":70,"value":399},{"type":64,"tag":223,"props":5188,"children":5189},{"class":225,"line":402},[5190],{"type":64,"tag":223,"props":5191,"children":5192},{"emptyLinePlaceholder":201},[5193],{"type":70,"value":477},{"type":64,"tag":223,"props":5195,"children":5196},{"class":225,"line":433},[5197],{"type":64,"tag":223,"props":5198,"children":5199},{"style":350},[5200],{"type":70,"value":5201},"\u002F\u002F After\n",{"type":64,"tag":223,"props":5203,"children":5204},{"class":225,"line":471},[5205,5209,5213,5217,5221,5225,5229,5233],{"type":64,"tag":223,"props":5206,"children":5207},{"style":359},[5208],{"type":70,"value":362},{"type":64,"tag":223,"props":5210,"children":5211},{"style":365},[5212],{"type":70,"value":368},{"type":64,"tag":223,"props":5214,"children":5215},{"style":371},[5216],{"type":70,"value":786},{"type":64,"tag":223,"props":5218,"children":5219},{"style":365},[5220],{"type":70,"value":379},{"type":64,"tag":223,"props":5222,"children":5223},{"style":359},[5224],{"type":70,"value":384},{"type":64,"tag":223,"props":5226,"children":5227},{"style":365},[5228],{"type":70,"value":389},{"type":64,"tag":223,"props":5230,"children":5231},{"style":236},[5232],{"type":70,"value":803},{"type":64,"tag":223,"props":5234,"children":5235},{"style":365},[5236],{"type":70,"value":399},{"type":64,"tag":180,"props":5238,"children":5240},{"id":5239},"loaders",[5241],{"type":70,"value":5242},"Loaders",{"type":64,"tag":187,"props":5244,"children":5246},{"className":5245},[190],[5247],{"type":64,"tag":193,"props":5248,"children":5250},{"className":5249},[196],[5251,5254,5255],{"type":64,"tag":199,"props":5252,"children":5253},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":5256,"children":5257},{},[5258],{"type":70,"value":5259},"Convert React Router loaders",{"type":64,"tag":73,"props":5261,"children":5262},{},[5263],{"type":70,"value":5264},"React Router (v7):",{"type":64,"tag":212,"props":5266,"children":5268},{"className":738,"code":5267,"language":740,"meta":217,"style":217},"export async function loader({ params }) {\n  const post = await fetchPost(params.postId)\n  return { post }\n}\n\nexport default function Post() {\n  const { post } = useLoaderData()\n  return \u003Cdiv>{post.title}\u003C\u002Fdiv>\n}\n",[5269],{"type":64,"tag":94,"props":5270,"children":5271},{"__ignoreMap":217},[5272,5309,5352,5371,5378,5385,5413,5445,5489],{"type":64,"tag":223,"props":5273,"children":5274},{"class":225,"line":226},[5275,5279,5283,5288,5292,5297,5301,5305],{"type":64,"tag":223,"props":5276,"children":5277},{"style":359},[5278],{"type":70,"value":486},{"type":64,"tag":223,"props":5280,"children":5281},{"style":861},[5282],{"type":70,"value":1931},{"type":64,"tag":223,"props":5284,"children":5285},{"style":861},[5286],{"type":70,"value":5287}," function",{"type":64,"tag":223,"props":5289,"children":5290},{"style":494},[5291],{"type":70,"value":1789},{"type":64,"tag":223,"props":5293,"children":5294},{"style":365},[5295],{"type":70,"value":5296},"({",{"type":64,"tag":223,"props":5298,"children":5299},{"style":2164},[5300],{"type":70,"value":2453},{"type":64,"tag":223,"props":5302,"children":5303},{"style":365},[5304],{"type":70,"value":2458},{"type":64,"tag":223,"props":5306,"children":5307},{"style":365},[5308],{"type":70,"value":1401},{"type":64,"tag":223,"props":5310,"children":5311},{"class":225,"line":299},[5312,5316,5320,5324,5328,5332,5336,5340,5344,5348],{"type":64,"tag":223,"props":5313,"children":5314},{"style":861},[5315],{"type":70,"value":2070},{"type":64,"tag":223,"props":5317,"children":5318},{"style":371},[5319],{"type":70,"value":2478},{"type":64,"tag":223,"props":5321,"children":5322},{"style":365},[5323],{"type":70,"value":1961},{"type":64,"tag":223,"props":5325,"children":5326},{"style":359},[5327],{"type":70,"value":1966},{"type":64,"tag":223,"props":5329,"children":5330},{"style":494},[5331],{"type":70,"value":2491},{"type":64,"tag":223,"props":5333,"children":5334},{"style":513},[5335],{"type":70,"value":501},{"type":64,"tag":223,"props":5337,"children":5338},{"style":371},[5339],{"type":70,"value":131},{"type":64,"tag":223,"props":5341,"children":5342},{"style":365},[5343],{"type":70,"value":1489},{"type":64,"tag":223,"props":5345,"children":5346},{"style":371},[5347],{"type":70,"value":2508},{"type":64,"tag":223,"props":5349,"children":5350},{"style":513},[5351],{"type":70,"value":645},{"type":64,"tag":223,"props":5353,"children":5354},{"class":225,"line":402},[5355,5359,5363,5367],{"type":64,"tag":223,"props":5356,"children":5357},{"style":359},[5358],{"type":70,"value":2112},{"type":64,"tag":223,"props":5360,"children":5361},{"style":365},[5362],{"type":70,"value":368},{"type":64,"tag":223,"props":5364,"children":5365},{"style":371},[5366],{"type":70,"value":2478},{"type":64,"tag":223,"props":5368,"children":5369},{"style":365},[5370],{"type":70,"value":1803},{"type":64,"tag":223,"props":5372,"children":5373},{"class":225,"line":433},[5374],{"type":64,"tag":223,"props":5375,"children":5376},{"style":365},[5377],{"type":70,"value":1456},{"type":64,"tag":223,"props":5379,"children":5380},{"class":225,"line":471},[5381],{"type":64,"tag":223,"props":5382,"children":5383},{"emptyLinePlaceholder":201},[5384],{"type":70,"value":477},{"type":64,"tag":223,"props":5386,"children":5387},{"class":225,"line":480},[5388,5392,5396,5400,5405,5409],{"type":64,"tag":223,"props":5389,"children":5390},{"style":359},[5391],{"type":70,"value":486},{"type":64,"tag":223,"props":5393,"children":5394},{"style":359},[5395],{"type":70,"value":491},{"type":64,"tag":223,"props":5397,"children":5398},{"style":861},[5399],{"type":70,"value":5287},{"type":64,"tag":223,"props":5401,"children":5402},{"style":494},[5403],{"type":70,"value":5404}," Post",{"type":64,"tag":223,"props":5406,"children":5407},{"style":365},[5408],{"type":70,"value":614},{"type":64,"tag":223,"props":5410,"children":5411},{"style":365},[5412],{"type":70,"value":1401},{"type":64,"tag":223,"props":5414,"children":5415},{"class":225,"line":509},[5416,5420,5424,5428,5432,5436,5441],{"type":64,"tag":223,"props":5417,"children":5418},{"style":861},[5419],{"type":70,"value":2070},{"type":64,"tag":223,"props":5421,"children":5422},{"style":365},[5423],{"type":70,"value":368},{"type":64,"tag":223,"props":5425,"children":5426},{"style":371},[5427],{"type":70,"value":2478},{"type":64,"tag":223,"props":5429,"children":5430},{"style":365},[5431],{"type":70,"value":379},{"type":64,"tag":223,"props":5433,"children":5434},{"style":365},[5435],{"type":70,"value":1961},{"type":64,"tag":223,"props":5437,"children":5438},{"style":494},[5439],{"type":70,"value":5440}," useLoaderData",{"type":64,"tag":223,"props":5442,"children":5443},{"style":513},[5444],{"type":70,"value":1976},{"type":64,"tag":223,"props":5446,"children":5447},{"class":225,"line":529},[5448,5452,5456,5461,5465,5469,5473,5477,5481,5485],{"type":64,"tag":223,"props":5449,"children":5450},{"style":359},[5451],{"type":70,"value":2112},{"type":64,"tag":223,"props":5453,"children":5454},{"style":365},[5455],{"type":70,"value":1774},{"type":64,"tag":223,"props":5457,"children":5458},{"style":513},[5459],{"type":70,"value":5460},"div",{"type":64,"tag":223,"props":5462,"children":5463},{"style":365},[5464],{"type":70,"value":2655},{"type":64,"tag":223,"props":5466,"children":5467},{"style":371},[5468],{"type":70,"value":2660},{"type":64,"tag":223,"props":5470,"children":5471},{"style":365},[5472],{"type":70,"value":1489},{"type":64,"tag":223,"props":5474,"children":5475},{"style":371},[5476],{"type":70,"value":2229},{"type":64,"tag":223,"props":5478,"children":5479},{"style":365},[5480],{"type":70,"value":2234},{"type":64,"tag":223,"props":5482,"children":5483},{"style":513},[5484],{"type":70,"value":5460},{"type":64,"tag":223,"props":5486,"children":5487},{"style":365},[5488],{"type":70,"value":939},{"type":64,"tag":223,"props":5490,"children":5491},{"class":225,"line":603},[5492],{"type":64,"tag":223,"props":5493,"children":5494},{"style":365},[5495],{"type":70,"value":1456},{"type":64,"tag":73,"props":5497,"children":5498},{},[5499],{"type":70,"value":1808},{"type":64,"tag":212,"props":5501,"children":5503},{"className":738,"code":5502,"language":740,"meta":217,"style":217},"export const Route = createFileRoute('\u002Fposts\u002F$postId')({\n  loader: async ({ params }) => {\n    const post = await fetchPost(params.postId)\n    return { post }\n  },\n  component: Post,\n})\n\nfunction Post() {\n  const { post } = Route.useLoaderData()\n  return \u003Cdiv>{post.title}\u003C\u002Fdiv>\n}\n",[5504],{"type":64,"tag":94,"props":5505,"children":5506},{"__ignoreMap":217},[5507,5554,5589,5632,5651,5658,5677,5688,5695,5714,5753,5796],{"type":64,"tag":223,"props":5508,"children":5509},{"class":225,"line":226},[5510,5514,5518,5522,5526,5530,5534,5538,5542,5546,5550],{"type":64,"tag":223,"props":5511,"children":5512},{"style":359},[5513],{"type":70,"value":486},{"type":64,"tag":223,"props":5515,"children":5516},{"style":861},[5517],{"type":70,"value":864},{"type":64,"tag":223,"props":5519,"children":5520},{"style":371},[5521],{"type":70,"value":869},{"type":64,"tag":223,"props":5523,"children":5524},{"style":365},[5525],{"type":70,"value":874},{"type":64,"tag":223,"props":5527,"children":5528},{"style":494},[5529],{"type":70,"value":1839},{"type":64,"tag":223,"props":5531,"children":5532},{"style":371},[5533],{"type":70,"value":501},{"type":64,"tag":223,"props":5535,"children":5536},{"style":365},[5537],{"type":70,"value":566},{"type":64,"tag":223,"props":5539,"children":5540},{"style":236},[5541],{"type":70,"value":2322},{"type":64,"tag":223,"props":5543,"children":5544},{"style":365},[5545],{"type":70,"value":566},{"type":64,"tag":223,"props":5547,"children":5548},{"style":371},[5549],{"type":70,"value":1910},{"type":64,"tag":223,"props":5551,"children":5552},{"style":365},[5553],{"type":70,"value":506},{"type":64,"tag":223,"props":5555,"children":5556},{"class":225,"line":299},[5557,5561,5565,5569,5573,5577,5581,5585],{"type":64,"tag":223,"props":5558,"children":5559},{"style":494},[5560],{"type":70,"value":1922},{"type":64,"tag":223,"props":5562,"children":5563},{"style":365},[5564],{"type":70,"value":521},{"type":64,"tag":223,"props":5566,"children":5567},{"style":861},[5568],{"type":70,"value":1931},{"type":64,"tag":223,"props":5570,"children":5571},{"style":365},[5572],{"type":70,"value":2448},{"type":64,"tag":223,"props":5574,"children":5575},{"style":2164},[5576],{"type":70,"value":2453},{"type":64,"tag":223,"props":5578,"children":5579},{"style":365},[5580],{"type":70,"value":2458},{"type":64,"tag":223,"props":5582,"children":5583},{"style":861},[5584],{"type":70,"value":908},{"type":64,"tag":223,"props":5586,"children":5587},{"style":365},[5588],{"type":70,"value":1401},{"type":64,"tag":223,"props":5590,"children":5591},{"class":225,"line":402},[5592,5596,5600,5604,5608,5612,5616,5620,5624,5628],{"type":64,"tag":223,"props":5593,"children":5594},{"style":861},[5595],{"type":70,"value":1951},{"type":64,"tag":223,"props":5597,"children":5598},{"style":371},[5599],{"type":70,"value":2478},{"type":64,"tag":223,"props":5601,"children":5602},{"style":365},[5603],{"type":70,"value":1961},{"type":64,"tag":223,"props":5605,"children":5606},{"style":359},[5607],{"type":70,"value":1966},{"type":64,"tag":223,"props":5609,"children":5610},{"style":494},[5611],{"type":70,"value":2491},{"type":64,"tag":223,"props":5613,"children":5614},{"style":513},[5615],{"type":70,"value":501},{"type":64,"tag":223,"props":5617,"children":5618},{"style":371},[5619],{"type":70,"value":131},{"type":64,"tag":223,"props":5621,"children":5622},{"style":365},[5623],{"type":70,"value":1489},{"type":64,"tag":223,"props":5625,"children":5626},{"style":371},[5627],{"type":70,"value":2508},{"type":64,"tag":223,"props":5629,"children":5630},{"style":513},[5631],{"type":70,"value":645},{"type":64,"tag":223,"props":5633,"children":5634},{"class":225,"line":433},[5635,5639,5643,5647],{"type":64,"tag":223,"props":5636,"children":5637},{"style":359},[5638],{"type":70,"value":1984},{"type":64,"tag":223,"props":5640,"children":5641},{"style":365},[5642],{"type":70,"value":368},{"type":64,"tag":223,"props":5644,"children":5645},{"style":371},[5646],{"type":70,"value":2478},{"type":64,"tag":223,"props":5648,"children":5649},{"style":365},[5650],{"type":70,"value":1803},{"type":64,"tag":223,"props":5652,"children":5653},{"class":225,"line":471},[5654],{"type":64,"tag":223,"props":5655,"children":5656},{"style":365},[5657],{"type":70,"value":2004},{"type":64,"tag":223,"props":5659,"children":5660},{"class":225,"line":480},[5661,5665,5669,5673],{"type":64,"tag":223,"props":5662,"children":5663},{"style":513},[5664],{"type":70,"value":894},{"type":64,"tag":223,"props":5666,"children":5667},{"style":365},[5668],{"type":70,"value":521},{"type":64,"tag":223,"props":5670,"children":5671},{"style":371},[5672],{"type":70,"value":5404},{"type":64,"tag":223,"props":5674,"children":5675},{"style":365},[5676],{"type":70,"value":600},{"type":64,"tag":223,"props":5678,"children":5679},{"class":225,"line":509},[5680,5684],{"type":64,"tag":223,"props":5681,"children":5682},{"style":365},[5683],{"type":70,"value":640},{"type":64,"tag":223,"props":5685,"children":5686},{"style":371},[5687],{"type":70,"value":645},{"type":64,"tag":223,"props":5689,"children":5690},{"class":225,"line":529},[5691],{"type":64,"tag":223,"props":5692,"children":5693},{"emptyLinePlaceholder":201},[5694],{"type":70,"value":477},{"type":64,"tag":223,"props":5696,"children":5697},{"class":225,"line":603},[5698,5702,5706,5710],{"type":64,"tag":223,"props":5699,"children":5700},{"style":861},[5701],{"type":70,"value":2050},{"type":64,"tag":223,"props":5703,"children":5704},{"style":494},[5705],{"type":70,"value":5404},{"type":64,"tag":223,"props":5707,"children":5708},{"style":365},[5709],{"type":70,"value":614},{"type":64,"tag":223,"props":5711,"children":5712},{"style":365},[5713],{"type":70,"value":1401},{"type":64,"tag":223,"props":5715,"children":5716},{"class":225,"line":621},[5717,5721,5725,5729,5733,5737,5741,5745,5749],{"type":64,"tag":223,"props":5718,"children":5719},{"style":861},[5720],{"type":70,"value":2070},{"type":64,"tag":223,"props":5722,"children":5723},{"style":365},[5724],{"type":70,"value":368},{"type":64,"tag":223,"props":5726,"children":5727},{"style":371},[5728],{"type":70,"value":2478},{"type":64,"tag":223,"props":5730,"children":5731},{"style":365},[5732],{"type":70,"value":379},{"type":64,"tag":223,"props":5734,"children":5735},{"style":365},[5736],{"type":70,"value":1961},{"type":64,"tag":223,"props":5738,"children":5739},{"style":371},[5740],{"type":70,"value":2091},{"type":64,"tag":223,"props":5742,"children":5743},{"style":365},[5744],{"type":70,"value":1489},{"type":64,"tag":223,"props":5746,"children":5747},{"style":494},[5748],{"type":70,"value":2100},{"type":64,"tag":223,"props":5750,"children":5751},{"style":513},[5752],{"type":70,"value":1976},{"type":64,"tag":223,"props":5754,"children":5755},{"class":225,"line":634},[5756,5760,5764,5768,5772,5776,5780,5784,5788,5792],{"type":64,"tag":223,"props":5757,"children":5758},{"style":359},[5759],{"type":70,"value":2112},{"type":64,"tag":223,"props":5761,"children":5762},{"style":365},[5763],{"type":70,"value":1774},{"type":64,"tag":223,"props":5765,"children":5766},{"style":513},[5767],{"type":70,"value":5460},{"type":64,"tag":223,"props":5769,"children":5770},{"style":365},[5771],{"type":70,"value":2655},{"type":64,"tag":223,"props":5773,"children":5774},{"style":371},[5775],{"type":70,"value":2660},{"type":64,"tag":223,"props":5777,"children":5778},{"style":365},[5779],{"type":70,"value":1489},{"type":64,"tag":223,"props":5781,"children":5782},{"style":371},[5783],{"type":70,"value":2229},{"type":64,"tag":223,"props":5785,"children":5786},{"style":365},[5787],{"type":70,"value":2234},{"type":64,"tag":223,"props":5789,"children":5790},{"style":513},[5791],{"type":70,"value":5460},{"type":64,"tag":223,"props":5793,"children":5794},{"style":365},[5795],{"type":70,"value":939},{"type":64,"tag":223,"props":5797,"children":5798},{"class":225,"line":1070},[5799],{"type":64,"tag":223,"props":5800,"children":5801},{"style":365},[5802],{"type":70,"value":1456},{"type":64,"tag":73,"props":5804,"children":5805},{},[5806],{"type":70,"value":2947},{"type":64,"tag":187,"props":5808,"children":5809},{},[5810,5815,5841,5846],{"type":64,"tag":193,"props":5811,"children":5812},{},[5813],{"type":70,"value":5814},"Loader is a route option, not a separate export",{"type":64,"tag":193,"props":5816,"children":5817},{},[5818,5824,5826,5832,5834,5840],{"type":64,"tag":94,"props":5819,"children":5821},{"className":5820},[],[5822],{"type":70,"value":5823},"useLoaderData()",{"type":70,"value":5825}," is called via ",{"type":64,"tag":94,"props":5827,"children":5829},{"className":5828},[],[5830],{"type":70,"value":5831},"Route.useLoaderData()",{"type":70,"value":5833}," (or ",{"type":64,"tag":94,"props":5835,"children":5837},{"className":5836},[],[5838],{"type":70,"value":5839},"useLoaderData({ from })",{"type":70,"value":595},{"type":64,"tag":193,"props":5842,"children":5843},{},[5844],{"type":70,"value":5845},"TanStack Router loaders run on the CLIENT by default (not server-only)",{"type":64,"tag":193,"props":5847,"children":5848},{},[5849,5851,5857],{"type":70,"value":5850},"No ",{"type":64,"tag":94,"props":5852,"children":5854},{"className":5853},[],[5855],{"type":70,"value":5856},"json()",{"type":70,"value":5858}," wrapper needed — return plain objects",{"type":64,"tag":180,"props":5860,"children":5862},{"id":5861},"code-splitting",[5863],{"type":70,"value":5864},"Code Splitting",{"type":64,"tag":187,"props":5866,"children":5868},{"className":5867},[190],[5869],{"type":64,"tag":193,"props":5870,"children":5872},{"className":5871},[196],[5873,5876,5877,5882,5884,5890,5892,5898],{"type":64,"tag":199,"props":5874,"children":5875},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":5878,"children":5879},{},[5880],{"type":70,"value":5881},"Convert lazy route imports",{"type":70,"value":5883}," — with ",{"type":64,"tag":94,"props":5885,"children":5887},{"className":5886},[],[5888],{"type":70,"value":5889},"autoCodeSplitting: true",{"type":70,"value":5891}," in the plugin config, this is automatic. For manual splitting, use ",{"type":64,"tag":94,"props":5893,"children":5895},{"className":5894},[],[5896],{"type":70,"value":5897},".lazy.tsx",{"type":70,"value":5899}," files:",{"type":64,"tag":212,"props":5901,"children":5903},{"className":738,"code":5902,"language":740,"meta":217,"style":217},"\u002F\u002F src\u002Froutes\u002Flazy-page.lazy.tsx\nimport { createLazyFileRoute } from '@tanstack\u002Freact-router'\n\nexport const Route = createLazyFileRoute('\u002Flazy-page')({\n  component: () => \u003Cdiv>Lazy loaded\u003C\u002Fdiv>,\n})\n",[5904],{"type":64,"tag":94,"props":5905,"children":5906},{"__ignoreMap":217},[5907,5915,5951,5958,6006,6054],{"type":64,"tag":223,"props":5908,"children":5909},{"class":225,"line":226},[5910],{"type":64,"tag":223,"props":5911,"children":5912},{"style":350},[5913],{"type":70,"value":5914},"\u002F\u002F src\u002Froutes\u002Flazy-page.lazy.tsx\n",{"type":64,"tag":223,"props":5916,"children":5917},{"class":225,"line":299},[5918,5922,5926,5931,5935,5939,5943,5947],{"type":64,"tag":223,"props":5919,"children":5920},{"style":359},[5921],{"type":70,"value":362},{"type":64,"tag":223,"props":5923,"children":5924},{"style":365},[5925],{"type":70,"value":368},{"type":64,"tag":223,"props":5927,"children":5928},{"style":371},[5929],{"type":70,"value":5930}," createLazyFileRoute",{"type":64,"tag":223,"props":5932,"children":5933},{"style":365},[5934],{"type":70,"value":379},{"type":64,"tag":223,"props":5936,"children":5937},{"style":359},[5938],{"type":70,"value":384},{"type":64,"tag":223,"props":5940,"children":5941},{"style":365},[5942],{"type":70,"value":389},{"type":64,"tag":223,"props":5944,"children":5945},{"style":236},[5946],{"type":70,"value":803},{"type":64,"tag":223,"props":5948,"children":5949},{"style":365},[5950],{"type":70,"value":399},{"type":64,"tag":223,"props":5952,"children":5953},{"class":225,"line":402},[5954],{"type":64,"tag":223,"props":5955,"children":5956},{"emptyLinePlaceholder":201},[5957],{"type":70,"value":477},{"type":64,"tag":223,"props":5959,"children":5960},{"class":225,"line":433},[5961,5965,5969,5973,5977,5981,5985,5989,5994,5998,6002],{"type":64,"tag":223,"props":5962,"children":5963},{"style":359},[5964],{"type":70,"value":486},{"type":64,"tag":223,"props":5966,"children":5967},{"style":861},[5968],{"type":70,"value":864},{"type":64,"tag":223,"props":5970,"children":5971},{"style":371},[5972],{"type":70,"value":869},{"type":64,"tag":223,"props":5974,"children":5975},{"style":365},[5976],{"type":70,"value":874},{"type":64,"tag":223,"props":5978,"children":5979},{"style":494},[5980],{"type":70,"value":5930},{"type":64,"tag":223,"props":5982,"children":5983},{"style":371},[5984],{"type":70,"value":501},{"type":64,"tag":223,"props":5986,"children":5987},{"style":365},[5988],{"type":70,"value":566},{"type":64,"tag":223,"props":5990,"children":5991},{"style":236},[5992],{"type":70,"value":5993},"\u002Flazy-page",{"type":64,"tag":223,"props":5995,"children":5996},{"style":365},[5997],{"type":70,"value":566},{"type":64,"tag":223,"props":5999,"children":6000},{"style":371},[6001],{"type":70,"value":1910},{"type":64,"tag":223,"props":6003,"children":6004},{"style":365},[6005],{"type":70,"value":506},{"type":64,"tag":223,"props":6007,"children":6008},{"class":225,"line":471},[6009,6013,6017,6021,6025,6029,6033,6037,6042,6046,6050],{"type":64,"tag":223,"props":6010,"children":6011},{"style":494},[6012],{"type":70,"value":894},{"type":64,"tag":223,"props":6014,"children":6015},{"style":365},[6016],{"type":70,"value":521},{"type":64,"tag":223,"props":6018,"children":6019},{"style":365},[6020],{"type":70,"value":903},{"type":64,"tag":223,"props":6022,"children":6023},{"style":861},[6024],{"type":70,"value":908},{"type":64,"tag":223,"props":6026,"children":6027},{"style":365},[6028],{"type":70,"value":1774},{"type":64,"tag":223,"props":6030,"children":6031},{"style":513},[6032],{"type":70,"value":5460},{"type":64,"tag":223,"props":6034,"children":6035},{"style":365},[6036],{"type":70,"value":980},{"type":64,"tag":223,"props":6038,"children":6039},{"style":371},[6040],{"type":70,"value":6041},"Lazy loaded",{"type":64,"tag":223,"props":6043,"children":6044},{"style":365},[6045],{"type":70,"value":990},{"type":64,"tag":223,"props":6047,"children":6048},{"style":513},[6049],{"type":70,"value":5460},{"type":64,"tag":223,"props":6051,"children":6052},{"style":365},[6053],{"type":70,"value":1667},{"type":64,"tag":223,"props":6055,"children":6056},{"class":225,"line":480},[6057,6061],{"type":64,"tag":223,"props":6058,"children":6059},{"style":365},[6060],{"type":70,"value":640},{"type":64,"tag":223,"props":6062,"children":6063},{"style":371},[6064],{"type":70,"value":645},{"type":64,"tag":180,"props":6066,"children":6068},{"id":6067},"cleanup",[6069],{"type":70,"value":6070},"Cleanup",{"type":64,"tag":187,"props":6072,"children":6074},{"className":6073},[190],[6075],{"type":64,"tag":193,"props":6076,"children":6078},{"className":6077},[196],[6079,6082,6083],{"type":64,"tag":199,"props":6080,"children":6081},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":6084,"children":6085},{},[6086],{"type":70,"value":6087},"Remove React Router and verify",{"type":64,"tag":212,"props":6089,"children":6091},{"className":214,"code":6090,"language":216,"meta":217,"style":217},"npm uninstall react-router react-router-dom\ngrep -r \"from 'react-router\" src\u002F  # find stale imports\nnpx tsc --noEmit                    # verify clean build\n",[6092],{"type":64,"tag":94,"props":6093,"children":6094},{"__ignoreMap":217},[6095,6117,6154],{"type":64,"tag":223,"props":6096,"children":6097},{"class":225,"line":226},[6098,6102,6107,6112],{"type":64,"tag":223,"props":6099,"children":6100},{"style":230},[6101],{"type":70,"value":281},{"type":64,"tag":223,"props":6103,"children":6104},{"style":236},[6105],{"type":70,"value":6106}," uninstall",{"type":64,"tag":223,"props":6108,"children":6109},{"style":236},[6110],{"type":70,"value":6111}," react-router",{"type":64,"tag":223,"props":6113,"children":6114},{"style":236},[6115],{"type":70,"value":6116}," react-router-dom\n",{"type":64,"tag":223,"props":6118,"children":6119},{"class":225,"line":299},[6120,6125,6130,6135,6140,6144,6149],{"type":64,"tag":223,"props":6121,"children":6122},{"style":230},[6123],{"type":70,"value":6124},"grep",{"type":64,"tag":223,"props":6126,"children":6127},{"style":236},[6128],{"type":70,"value":6129}," -r",{"type":64,"tag":223,"props":6131,"children":6132},{"style":365},[6133],{"type":70,"value":6134}," \"",{"type":64,"tag":223,"props":6136,"children":6137},{"style":236},[6138],{"type":70,"value":6139},"from 'react-router",{"type":64,"tag":223,"props":6141,"children":6142},{"style":365},[6143],{"type":70,"value":966},{"type":64,"tag":223,"props":6145,"children":6146},{"style":236},[6147],{"type":70,"value":6148}," src\u002F",{"type":64,"tag":223,"props":6150,"children":6151},{"style":350},[6152],{"type":70,"value":6153},"  # find stale imports\n",{"type":64,"tag":223,"props":6155,"children":6156},{"class":225,"line":402},[6157,6162,6167,6172],{"type":64,"tag":223,"props":6158,"children":6159},{"style":230},[6160],{"type":70,"value":6161},"npx",{"type":64,"tag":223,"props":6163,"children":6164},{"style":236},[6165],{"type":70,"value":6166}," tsc",{"type":64,"tag":223,"props":6168,"children":6169},{"style":236},[6170],{"type":70,"value":6171}," --noEmit",{"type":64,"tag":223,"props":6173,"children":6174},{"style":350},[6175],{"type":70,"value":6176},"                    # verify clean build\n",{"type":64,"tag":187,"props":6178,"children":6180},{"className":6179},[190],[6181],{"type":64,"tag":193,"props":6182,"children":6184},{"className":6183},[196],[6185,6188,6189,6194],{"type":64,"tag":199,"props":6186,"children":6187},{"disabled":201,"type":202},[],{"type":70,"value":205},{"type":64,"tag":86,"props":6190,"children":6191},{},[6192],{"type":70,"value":6193},"Test all routes",{"type":70,"value":6195}," — verify rendering, navigation (incl. back\u002Fforward), search params, dynamic params, and loaders",{"type":64,"tag":180,"props":6197,"children":6199},{"id":6198},"common-mistakes",[6200],{"type":70,"value":6201},"Common Mistakes",{"type":64,"tag":6203,"props":6204,"children":6206},"h3",{"id":6205},"_1-high-leaving-react-router-imports-alongside-tanstack-router",[6207],{"type":70,"value":6208},"1. HIGH: Leaving React Router imports alongside TanStack Router",{"type":64,"tag":73,"props":6210,"children":6211},{},[6212,6214,6219,6221,6226,6227,6232],{"type":70,"value":6213},"Both libraries export ",{"type":64,"tag":94,"props":6215,"children":6217},{"className":6216},[],[6218],{"type":70,"value":952},{"type":70,"value":6220},", ",{"type":64,"tag":94,"props":6222,"children":6224},{"className":6223},[],[6225],{"type":70,"value":3009},{"type":70,"value":6220},{"type":64,"tag":94,"props":6228,"children":6230},{"className":6229},[],[6231],{"type":70,"value":1080},{"type":70,"value":6233},", etc. Leftover React Router imports cause \"cannot use useNavigate outside of context\" errors because the wrong context provider is used.",{"type":64,"tag":212,"props":6235,"children":6237},{"className":738,"code":6236,"language":740,"meta":217,"style":217},"\u002F\u002F WRONG — mixed imports\nimport { Link } from '@tanstack\u002Freact-router'\nimport { useNavigate } from 'react-router' \u002F\u002F \u003C- still React Router!\n\n\u002F\u002F CORRECT — all from TanStack Router\nimport { Link, useNavigate } from '@tanstack\u002Freact-router'\n",[6238],{"type":64,"tag":94,"props":6239,"children":6240},{"__ignoreMap":217},[6241,6249,6284,6324,6331,6339],{"type":64,"tag":223,"props":6242,"children":6243},{"class":225,"line":226},[6244],{"type":64,"tag":223,"props":6245,"children":6246},{"style":350},[6247],{"type":70,"value":6248},"\u002F\u002F WRONG — mixed imports\n",{"type":64,"tag":223,"props":6250,"children":6251},{"class":225,"line":299},[6252,6256,6260,6264,6268,6272,6276,6280],{"type":64,"tag":223,"props":6253,"children":6254},{"style":359},[6255],{"type":70,"value":362},{"type":64,"tag":223,"props":6257,"children":6258},{"style":365},[6259],{"type":70,"value":368},{"type":64,"tag":223,"props":6261,"children":6262},{"style":371},[6263],{"type":70,"value":777},{"type":64,"tag":223,"props":6265,"children":6266},{"style":365},[6267],{"type":70,"value":379},{"type":64,"tag":223,"props":6269,"children":6270},{"style":359},[6271],{"type":70,"value":384},{"type":64,"tag":223,"props":6273,"children":6274},{"style":365},[6275],{"type":70,"value":389},{"type":64,"tag":223,"props":6277,"children":6278},{"style":236},[6279],{"type":70,"value":803},{"type":64,"tag":223,"props":6281,"children":6282},{"style":365},[6283],{"type":70,"value":399},{"type":64,"tag":223,"props":6285,"children":6286},{"class":225,"line":402},[6287,6291,6295,6299,6303,6307,6311,6315,6319],{"type":64,"tag":223,"props":6288,"children":6289},{"style":359},[6290],{"type":70,"value":362},{"type":64,"tag":223,"props":6292,"children":6293},{"style":365},[6294],{"type":70,"value":368},{"type":64,"tag":223,"props":6296,"children":6297},{"style":371},[6298],{"type":70,"value":3038},{"type":64,"tag":223,"props":6300,"children":6301},{"style":365},[6302],{"type":70,"value":379},{"type":64,"tag":223,"props":6304,"children":6305},{"style":359},[6306],{"type":70,"value":384},{"type":64,"tag":223,"props":6308,"children":6309},{"style":365},[6310],{"type":70,"value":389},{"type":64,"tag":223,"props":6312,"children":6313},{"style":236},[6314],{"type":70,"value":22},{"type":64,"tag":223,"props":6316,"children":6317},{"style":365},[6318],{"type":70,"value":566},{"type":64,"tag":223,"props":6320,"children":6321},{"style":350},[6322],{"type":70,"value":6323}," \u002F\u002F \u003C- still React Router!\n",{"type":64,"tag":223,"props":6325,"children":6326},{"class":225,"line":433},[6327],{"type":64,"tag":223,"props":6328,"children":6329},{"emptyLinePlaceholder":201},[6330],{"type":70,"value":477},{"type":64,"tag":223,"props":6332,"children":6333},{"class":225,"line":471},[6334],{"type":64,"tag":223,"props":6335,"children":6336},{"style":350},[6337],{"type":70,"value":6338},"\u002F\u002F CORRECT — all from TanStack Router\n",{"type":64,"tag":223,"props":6340,"children":6341},{"class":225,"line":480},[6342,6346,6350,6354,6358,6362,6366,6370,6374,6378],{"type":64,"tag":223,"props":6343,"children":6344},{"style":359},[6345],{"type":70,"value":362},{"type":64,"tag":223,"props":6347,"children":6348},{"style":365},[6349],{"type":70,"value":368},{"type":64,"tag":223,"props":6351,"children":6352},{"style":371},[6353],{"type":70,"value":777},{"type":64,"tag":223,"props":6355,"children":6356},{"style":365},[6357],{"type":70,"value":571},{"type":64,"tag":223,"props":6359,"children":6360},{"style":371},[6361],{"type":70,"value":3038},{"type":64,"tag":223,"props":6363,"children":6364},{"style":365},[6365],{"type":70,"value":379},{"type":64,"tag":223,"props":6367,"children":6368},{"style":359},[6369],{"type":70,"value":384},{"type":64,"tag":223,"props":6371,"children":6372},{"style":365},[6373],{"type":70,"value":389},{"type":64,"tag":223,"props":6375,"children":6376},{"style":236},[6377],{"type":70,"value":803},{"type":64,"tag":223,"props":6379,"children":6380},{"style":365},[6381],{"type":70,"value":399},{"type":64,"tag":73,"props":6383,"children":6384},{},[6385,6390,6392,6397,6398,6403],{"type":64,"tag":86,"props":6386,"children":6387},{},[6388],{"type":70,"value":6389},"Fix",{"type":70,"value":6391},": Uninstall ",{"type":64,"tag":94,"props":6393,"children":6395},{"className":6394},[],[6396],{"type":70,"value":22},{"type":70,"value":971},{"type":64,"tag":94,"props":6399,"children":6401},{"className":6400},[],[6402],{"type":70,"value":106},{"type":70,"value":6404}," completely. TypeScript will flag every stale import.",{"type":64,"tag":6203,"props":6406,"children":6408},{"id":6407},"_2-high-using-react-router-usesearchparams-pattern",[6409,6411,6416],{"type":70,"value":6410},"2. HIGH: Using React Router ",{"type":64,"tag":94,"props":6412,"children":6414},{"className":6413},[],[6415],{"type":70,"value":3284},{"type":70,"value":6417}," pattern",{"type":64,"tag":212,"props":6419,"children":6421},{"className":738,"code":6420,"language":740,"meta":217,"style":217},"\u002F\u002F WRONG — React Router pattern, returns URLSearchParams\nconst [searchParams, setSearchParams] = useSearchParams()\nconst page = Number(searchParams.get('page'))\n\n\u002F\u002F CORRECT — TanStack Router pattern, returns typed object\n\u002F\u002F Route definition:\nvalidateSearch:\n  z.object({\n    page: z.number().default(1).catch(1),\n  }),\n\n\u002F\u002F Component:\nconst { page } = Route.useSearch()\n\u002F\u002F page is already typed as number — no casting needed\n",[6422],{"type":64,"tag":94,"props":6423,"children":6424},{"__ignoreMap":217},[6425,6433,6472,6525,6532,6540,6548,6560,6584,6655,6670,6677,6685,6724],{"type":64,"tag":223,"props":6426,"children":6427},{"class":225,"line":226},[6428],{"type":64,"tag":223,"props":6429,"children":6430},{"style":350},[6431],{"type":70,"value":6432},"\u002F\u002F WRONG — React Router pattern, returns URLSearchParams\n",{"type":64,"tag":223,"props":6434,"children":6435},{"class":225,"line":299},[6436,6440,6444,6448,6452,6456,6460,6464,6468],{"type":64,"tag":223,"props":6437,"children":6438},{"style":861},[6439],{"type":70,"value":1330},{"type":64,"tag":223,"props":6441,"children":6442},{"style":365},[6443],{"type":70,"value":3385},{"type":64,"tag":223,"props":6445,"children":6446},{"style":371},[6447],{"type":70,"value":3390},{"type":64,"tag":223,"props":6449,"children":6450},{"style":365},[6451],{"type":70,"value":571},{"type":64,"tag":223,"props":6453,"children":6454},{"style":371},[6455],{"type":70,"value":3399},{"type":64,"tag":223,"props":6457,"children":6458},{"style":365},[6459],{"type":70,"value":3404},{"type":64,"tag":223,"props":6461,"children":6462},{"style":365},[6463],{"type":70,"value":1961},{"type":64,"tag":223,"props":6465,"children":6466},{"style":494},[6467],{"type":70,"value":3326},{"type":64,"tag":223,"props":6469,"children":6470},{"style":371},[6471],{"type":70,"value":1976},{"type":64,"tag":223,"props":6473,"children":6474},{"class":225,"line":402},[6475,6479,6483,6487,6491,6496,6500,6504,6508,6512,6516,6520],{"type":64,"tag":223,"props":6476,"children":6477},{"style":861},[6478],{"type":70,"value":1330},{"type":64,"tag":223,"props":6480,"children":6481},{"style":371},[6482],{"type":70,"value":5048},{"type":64,"tag":223,"props":6484,"children":6485},{"style":365},[6486],{"type":70,"value":874},{"type":64,"tag":223,"props":6488,"children":6489},{"style":494},[6490],{"type":70,"value":3437},{"type":64,"tag":223,"props":6492,"children":6493},{"style":371},[6494],{"type":70,"value":6495},"(searchParams",{"type":64,"tag":223,"props":6497,"children":6498},{"style":365},[6499],{"type":70,"value":1489},{"type":64,"tag":223,"props":6501,"children":6502},{"style":494},[6503],{"type":70,"value":3454},{"type":64,"tag":223,"props":6505,"children":6506},{"style":371},[6507],{"type":70,"value":501},{"type":64,"tag":223,"props":6509,"children":6510},{"style":365},[6511],{"type":70,"value":566},{"type":64,"tag":223,"props":6513,"children":6514},{"style":236},[6515],{"type":70,"value":3467},{"type":64,"tag":223,"props":6517,"children":6518},{"style":365},[6519],{"type":70,"value":566},{"type":64,"tag":223,"props":6521,"children":6522},{"style":371},[6523],{"type":70,"value":6524},"))\n",{"type":64,"tag":223,"props":6526,"children":6527},{"class":225,"line":433},[6528],{"type":64,"tag":223,"props":6529,"children":6530},{"emptyLinePlaceholder":201},[6531],{"type":70,"value":477},{"type":64,"tag":223,"props":6533,"children":6534},{"class":225,"line":471},[6535],{"type":64,"tag":223,"props":6536,"children":6537},{"style":350},[6538],{"type":70,"value":6539},"\u002F\u002F CORRECT — TanStack Router pattern, returns typed object\n",{"type":64,"tag":223,"props":6541,"children":6542},{"class":225,"line":480},[6543],{"type":64,"tag":223,"props":6544,"children":6545},{"style":350},[6546],{"type":70,"value":6547},"\u002F\u002F Route definition:\n",{"type":64,"tag":223,"props":6549,"children":6550},{"class":225,"line":509},[6551,6555],{"type":64,"tag":223,"props":6552,"children":6553},{"style":230},[6554],{"type":70,"value":3292},{"type":64,"tag":223,"props":6556,"children":6557},{"style":365},[6558],{"type":70,"value":6559},":\n",{"type":64,"tag":223,"props":6561,"children":6562},{"class":225,"line":529},[6563,6568,6572,6576,6580],{"type":64,"tag":223,"props":6564,"children":6565},{"style":371},[6566],{"type":70,"value":6567},"  z",{"type":64,"tag":223,"props":6569,"children":6570},{"style":365},[6571],{"type":70,"value":1489},{"type":64,"tag":223,"props":6573,"children":6574},{"style":494},[6575],{"type":70,"value":3758},{"type":64,"tag":223,"props":6577,"children":6578},{"style":371},[6579],{"type":70,"value":501},{"type":64,"tag":223,"props":6581,"children":6582},{"style":365},[6583],{"type":70,"value":506},{"type":64,"tag":223,"props":6585,"children":6586},{"class":225,"line":603},[6587,6591,6595,6599,6603,6607,6611,6615,6619,6623,6627,6631,6635,6639,6643,6647,6651],{"type":64,"tag":223,"props":6588,"children":6589},{"style":513},[6590],{"type":70,"value":3774},{"type":64,"tag":223,"props":6592,"children":6593},{"style":365},[6594],{"type":70,"value":521},{"type":64,"tag":223,"props":6596,"children":6597},{"style":371},[6598],{"type":70,"value":3658},{"type":64,"tag":223,"props":6600,"children":6601},{"style":365},[6602],{"type":70,"value":1489},{"type":64,"tag":223,"props":6604,"children":6605},{"style":494},[6606],{"type":70,"value":3791},{"type":64,"tag":223,"props":6608,"children":6609},{"style":371},[6610],{"type":70,"value":614},{"type":64,"tag":223,"props":6612,"children":6613},{"style":365},[6614],{"type":70,"value":1489},{"type":64,"tag":223,"props":6616,"children":6617},{"style":494},[6618],{"type":70,"value":3804},{"type":64,"tag":223,"props":6620,"children":6621},{"style":371},[6622],{"type":70,"value":501},{"type":64,"tag":223,"props":6624,"children":6625},{"style":3484},[6626],{"type":70,"value":3813},{"type":64,"tag":223,"props":6628,"children":6629},{"style":371},[6630],{"type":70,"value":595},{"type":64,"tag":223,"props":6632,"children":6633},{"style":365},[6634],{"type":70,"value":1489},{"type":64,"tag":223,"props":6636,"children":6637},{"style":494},[6638],{"type":70,"value":3826},{"type":64,"tag":223,"props":6640,"children":6641},{"style":371},[6642],{"type":70,"value":501},{"type":64,"tag":223,"props":6644,"children":6645},{"style":3484},[6646],{"type":70,"value":3813},{"type":64,"tag":223,"props":6648,"children":6649},{"style":371},[6650],{"type":70,"value":595},{"type":64,"tag":223,"props":6652,"children":6653},{"style":365},[6654],{"type":70,"value":600},{"type":64,"tag":223,"props":6656,"children":6657},{"class":225,"line":621},[6658,6662,6666],{"type":64,"tag":223,"props":6659,"children":6660},{"style":365},[6661],{"type":70,"value":3850},{"type":64,"tag":223,"props":6663,"children":6664},{"style":371},[6665],{"type":70,"value":595},{"type":64,"tag":223,"props":6667,"children":6668},{"style":365},[6669],{"type":70,"value":600},{"type":64,"tag":223,"props":6671,"children":6672},{"class":225,"line":634},[6673],{"type":64,"tag":223,"props":6674,"children":6675},{"emptyLinePlaceholder":201},[6676],{"type":70,"value":477},{"type":64,"tag":223,"props":6678,"children":6679},{"class":225,"line":1070},[6680],{"type":64,"tag":223,"props":6681,"children":6682},{"style":350},[6683],{"type":70,"value":6684},"\u002F\u002F Component:\n",{"type":64,"tag":223,"props":6686,"children":6687},{"class":225,"line":1088},[6688,6692,6696,6700,6704,6708,6712,6716,6720],{"type":64,"tag":223,"props":6689,"children":6690},{"style":861},[6691],{"type":70,"value":1330},{"type":64,"tag":223,"props":6693,"children":6694},{"style":365},[6695],{"type":70,"value":368},{"type":64,"tag":223,"props":6697,"children":6698},{"style":371},[6699],{"type":70,"value":5048},{"type":64,"tag":223,"props":6701,"children":6702},{"style":365},[6703],{"type":70,"value":640},{"type":64,"tag":223,"props":6705,"children":6706},{"style":365},[6707],{"type":70,"value":1961},{"type":64,"tag":223,"props":6709,"children":6710},{"style":371},[6711],{"type":70,"value":2091},{"type":64,"tag":223,"props":6713,"children":6714},{"style":365},[6715],{"type":70,"value":1489},{"type":64,"tag":223,"props":6717,"children":6718},{"style":494},[6719],{"type":70,"value":3299},{"type":64,"tag":223,"props":6721,"children":6722},{"style":371},[6723],{"type":70,"value":1976},{"type":64,"tag":223,"props":6725,"children":6726},{"class":225,"line":1105},[6727],{"type":64,"tag":223,"props":6728,"children":6729},{"style":350},[6730],{"type":70,"value":6731},"\u002F\u002F page is already typed as number — no casting needed\n",{"type":64,"tag":6203,"props":6733,"children":6735},{"id":6734},"_3-high-interpolating-params-into-to-string",[6736,6738,6743],{"type":70,"value":6737},"3. HIGH: Interpolating params into ",{"type":64,"tag":94,"props":6739,"children":6741},{"className":6740},[],[6742],{"type":70,"value":123},{"type":70,"value":6744}," string",{"type":64,"tag":212,"props":6746,"children":6748},{"className":738,"code":6747,"language":740,"meta":217,"style":217},"\u002F\u002F WRONG — React Router habit\n\u003CLink to={`\u002Fposts\u002F${postId}`}>Post\u003C\u002FLink>\n\n\u002F\u002F CORRECT — TanStack Router: path pattern + params prop\n\u003CLink to=\"\u002Fposts\u002F$postId\" params={{ postId }}>Post\u003C\u002FLink>\n",[6749],{"type":64,"tag":94,"props":6750,"children":6751},{"__ignoreMap":217},[6752,6760,6821,6828,6836],{"type":64,"tag":223,"props":6753,"children":6754},{"class":225,"line":226},[6755],{"type":64,"tag":223,"props":6756,"children":6757},{"style":350},[6758],{"type":70,"value":6759},"\u002F\u002F WRONG — React Router habit\n",{"type":64,"tag":223,"props":6761,"children":6762},{"class":225,"line":299},[6763,6768,6772,6776,6780,6784,6788,6792,6796,6800,6804,6809,6813,6817],{"type":64,"tag":223,"props":6764,"children":6765},{"style":365},[6766],{"type":70,"value":6767},"\u003C",{"type":64,"tag":223,"props":6769,"children":6770},{"style":230},[6771],{"type":70,"value":952},{"type":64,"tag":223,"props":6773,"children":6774},{"style":861},[6775],{"type":70,"value":957},{"type":64,"tag":223,"props":6777,"children":6778},{"style":365},[6779],{"type":70,"value":1640},{"type":64,"tag":223,"props":6781,"children":6782},{"style":365},[6783],{"type":70,"value":2786},{"type":64,"tag":223,"props":6785,"children":6786},{"style":236},[6787],{"type":70,"value":2791},{"type":64,"tag":223,"props":6789,"children":6790},{"style":365},[6791],{"type":70,"value":2796},{"type":64,"tag":223,"props":6793,"children":6794},{"style":371},[6795],{"type":70,"value":2508},{"type":64,"tag":223,"props":6797,"children":6798},{"style":365},[6799],{"type":70,"value":2805},{"type":64,"tag":223,"props":6801,"children":6802},{"style":365},[6803],{"type":70,"value":2810},{"type":64,"tag":223,"props":6805,"children":6806},{"style":371},[6807],{"type":70,"value":6808},"Post",{"type":64,"tag":223,"props":6810,"children":6811},{"style":365},[6812],{"type":70,"value":990},{"type":64,"tag":223,"props":6814,"children":6815},{"style":230},[6816],{"type":70,"value":952},{"type":64,"tag":223,"props":6818,"children":6819},{"style":365},[6820],{"type":70,"value":939},{"type":64,"tag":223,"props":6822,"children":6823},{"class":225,"line":402},[6824],{"type":64,"tag":223,"props":6825,"children":6826},{"emptyLinePlaceholder":201},[6827],{"type":70,"value":477},{"type":64,"tag":223,"props":6829,"children":6830},{"class":225,"line":433},[6831],{"type":64,"tag":223,"props":6832,"children":6833},{"style":350},[6834],{"type":70,"value":6835},"\u002F\u002F CORRECT — TanStack Router: path pattern + params prop\n",{"type":64,"tag":223,"props":6837,"children":6838},{"class":225,"line":471},[6839,6843,6847,6851,6855,6859,6863,6867,6871,6875,6879,6884,6888,6892,6896],{"type":64,"tag":223,"props":6840,"children":6841},{"style":365},[6842],{"type":70,"value":6767},{"type":64,"tag":223,"props":6844,"children":6845},{"style":230},[6846],{"type":70,"value":952},{"type":64,"tag":223,"props":6848,"children":6849},{"style":861},[6850],{"type":70,"value":957},{"type":64,"tag":223,"props":6852,"children":6853},{"style":365},[6854],{"type":70,"value":874},{"type":64,"tag":223,"props":6856,"children":6857},{"style":365},[6858],{"type":70,"value":966},{"type":64,"tag":223,"props":6860,"children":6861},{"style":236},[6862],{"type":70,"value":2322},{"type":64,"tag":223,"props":6864,"children":6865},{"style":365},[6866],{"type":70,"value":966},{"type":64,"tag":223,"props":6868,"children":6869},{"style":861},[6870],{"type":70,"value":2453},{"type":64,"tag":223,"props":6872,"children":6873},{"style":365},[6874],{"type":70,"value":2909},{"type":64,"tag":223,"props":6876,"children":6877},{"style":371},[6878],{"type":70,"value":3243},{"type":64,"tag":223,"props":6880,"children":6881},{"style":365},[6882],{"type":70,"value":6883},"}}>",{"type":64,"tag":223,"props":6885,"children":6886},{"style":371},[6887],{"type":70,"value":6808},{"type":64,"tag":223,"props":6889,"children":6890},{"style":365},[6891],{"type":70,"value":990},{"type":64,"tag":223,"props":6893,"children":6894},{"style":230},[6895],{"type":70,"value":952},{"type":64,"tag":223,"props":6897,"children":6898},{"style":365},[6899],{"type":70,"value":939},{"type":64,"tag":6203,"props":6901,"children":6903},{"id":6902},"_4-medium-using-param-syntax-instead-of-param",[6904,6906,6912,6914],{"type":70,"value":6905},"4. MEDIUM: Using ",{"type":64,"tag":94,"props":6907,"children":6909},{"className":6908},[],[6910],{"type":70,"value":6911},":param",{"type":70,"value":6913}," syntax instead of ",{"type":64,"tag":94,"props":6915,"children":6917},{"className":6916},[],[6918],{"type":70,"value":6919},"$param",{"type":64,"tag":212,"props":6921,"children":6925},{"className":6922,"code":6924,"language":70,"meta":217},[6923],"language-text","React Router: \u002Fposts\u002F:postId\nTanStack Router: \u002Fposts\u002F$postId\n",[6926],{"type":64,"tag":94,"props":6927,"children":6928},{"__ignoreMap":217},[6929],{"type":70,"value":6924},{"type":64,"tag":73,"props":6931,"children":6932},{},[6933,6935,6941,6943],{"type":70,"value":6934},"File naming also uses ",{"type":64,"tag":94,"props":6936,"children":6938},{"className":6937},[],[6939],{"type":70,"value":6940},"$",{"type":70,"value":6942},": ",{"type":64,"tag":94,"props":6944,"children":6946},{"className":6945},[],[6947],{"type":70,"value":6948},"src\u002Froutes\u002Fposts\u002F$postId.tsx",{"type":64,"tag":180,"props":6950,"children":6952},{"id":6951},"quick-reference-api-mapping",[6953],{"type":70,"value":6954},"Quick Reference: API Mapping",{"type":64,"tag":6956,"props":6957,"children":6958},"table",{},[6959,6977],{"type":64,"tag":6960,"props":6961,"children":6962},"thead",{},[6963],{"type":64,"tag":6964,"props":6965,"children":6966},"tr",{},[6967,6973],{"type":64,"tag":6968,"props":6969,"children":6970},"th",{},[6971],{"type":70,"value":6972},"React Router v7",{"type":64,"tag":6968,"props":6974,"children":6975},{},[6976],{"type":70,"value":13},{"type":64,"tag":6978,"props":6979,"children":6980},"tbody",{},[6981,7002,7033,7053,7081,7102,7123,7150,7169,7208,7228,7251,7268,7297,7318],{"type":64,"tag":6964,"props":6982,"children":6983},{},[6984,6993],{"type":64,"tag":6985,"props":6986,"children":6987},"td",{},[6988],{"type":64,"tag":94,"props":6989,"children":6991},{"className":6990},[],[6992],{"type":70,"value":716},{"type":64,"tag":6985,"props":6994,"children":6995},{},[6996],{"type":64,"tag":94,"props":6997,"children":6999},{"className":6998},[],[7000],{"type":70,"value":7001},"\u003CRouterProvider router={router} \u002F>",{"type":64,"tag":6964,"props":7003,"children":7004},{},[7005,7022],{"type":64,"tag":6985,"props":7006,"children":7007},{},[7008,7014,7016],{"type":64,"tag":94,"props":7009,"children":7011},{"className":7010},[],[7012],{"type":70,"value":7013},"\u003CRoutes>",{"type":70,"value":7015}," \u002F ",{"type":64,"tag":94,"props":7017,"children":7019},{"className":7018},[],[7020],{"type":70,"value":7021},"\u003CRoute>",{"type":64,"tag":6985,"props":7023,"children":7024},{},[7025,7027],{"type":70,"value":7026},"File-based: ",{"type":64,"tag":94,"props":7028,"children":7030},{"className":7029},[],[7031],{"type":70,"value":7032},"src\u002Froutes\u002F*.tsx",{"type":64,"tag":6964,"props":7034,"children":7035},{},[7036,7045],{"type":64,"tag":6985,"props":7037,"children":7038},{},[7039],{"type":64,"tag":94,"props":7040,"children":7042},{"className":7041},[],[7043],{"type":70,"value":7044},"\u003CLink to=\"\u002Fpath\">",{"type":64,"tag":6985,"props":7046,"children":7047},{},[7048],{"type":64,"tag":94,"props":7049,"children":7051},{"className":7050},[],[7052],{"type":70,"value":7044},{"type":64,"tag":6964,"props":7054,"children":7055},{},[7056,7072],{"type":64,"tag":6985,"props":7057,"children":7058},{},[7059,7065,7067],{"type":64,"tag":94,"props":7060,"children":7062},{"className":7061},[],[7063],{"type":70,"value":7064},"\u003CLink to={",{"type":70,"value":7066},"\u002Fposts\u002F${id}",{"type":64,"tag":94,"props":7068,"children":7070},{"className":7069},[],[7071],{"type":70,"value":2810},{"type":64,"tag":6985,"props":7073,"children":7074},{},[7075],{"type":64,"tag":94,"props":7076,"children":7078},{"className":7077},[],[7079],{"type":70,"value":7080},"\u003CLink to=\"\u002Fposts\u002F$postId\" params={{ postId: id }}>",{"type":64,"tag":6964,"props":7082,"children":7083},{},[7084,7093],{"type":64,"tag":6985,"props":7085,"children":7086},{},[7087],{"type":64,"tag":94,"props":7088,"children":7090},{"className":7089},[],[7091],{"type":70,"value":7092},"useNavigate()('\u002Fpath')",{"type":64,"tag":6985,"props":7094,"children":7095},{},[7096],{"type":64,"tag":94,"props":7097,"children":7099},{"className":7098},[],[7100],{"type":70,"value":7101},"navigate({ to: '\u002Fpath' })",{"type":64,"tag":6964,"props":7103,"children":7104},{},[7105,7114],{"type":64,"tag":6985,"props":7106,"children":7107},{},[7108],{"type":64,"tag":94,"props":7109,"children":7111},{"className":7110},[],[7112],{"type":70,"value":7113},"useParams()",{"type":64,"tag":6985,"props":7115,"children":7116},{},[7117],{"type":64,"tag":94,"props":7118,"children":7120},{"className":7119},[],[7121],{"type":70,"value":7122},"useParams({ from: '\u002Froute\u002F$param' })",{"type":64,"tag":6964,"props":7124,"children":7125},{},[7126,7135],{"type":64,"tag":6985,"props":7127,"children":7128},{},[7129],{"type":64,"tag":94,"props":7130,"children":7132},{"className":7131},[],[7133],{"type":70,"value":7134},"useSearchParams()",{"type":64,"tag":6985,"props":7136,"children":7137},{},[7138,7143,7144],{"type":64,"tag":94,"props":7139,"children":7141},{"className":7140},[],[7142],{"type":70,"value":3292},{"type":70,"value":125},{"type":64,"tag":94,"props":7145,"children":7147},{"className":7146},[],[7148],{"type":70,"value":7149},"useSearch({ from })",{"type":64,"tag":6964,"props":7151,"children":7152},{},[7153,7161],{"type":64,"tag":6985,"props":7154,"children":7155},{},[7156],{"type":64,"tag":94,"props":7157,"children":7159},{"className":7158},[],[7160],{"type":70,"value":5823},{"type":64,"tag":6985,"props":7162,"children":7163},{},[7164],{"type":64,"tag":94,"props":7165,"children":7167},{"className":7166},[],[7168],{"type":70,"value":5831},{"type":64,"tag":6964,"props":7170,"children":7171},{},[7172,7180],{"type":64,"tag":6985,"props":7173,"children":7174},{},[7175],{"type":64,"tag":94,"props":7176,"children":7178},{"className":7177},[],[7179],{"type":70,"value":4577},{"type":64,"tag":6985,"props":7181,"children":7182},{},[7183,7189,7190,7196,7197,7202,7203],{"type":64,"tag":94,"props":7184,"children":7186},{"className":7185},[],[7187],{"type":70,"value":7188},"useMatch",{"type":70,"value":6220},{"type":64,"tag":94,"props":7191,"children":7193},{"className":7192},[],[7194],{"type":70,"value":7195},"useMatches",{"type":70,"value":6220},{"type":64,"tag":94,"props":7198,"children":7200},{"className":7199},[],[7201],{"type":70,"value":4278},{"type":70,"value":6220},{"type":64,"tag":94,"props":7204,"children":7206},{"className":7205},[],[7207],{"type":70,"value":3299},{"type":64,"tag":6964,"props":7209,"children":7210},{},[7211,7220],{"type":64,"tag":6985,"props":7212,"children":7213},{},[7214],{"type":64,"tag":94,"props":7215,"children":7217},{"className":7216},[],[7218],{"type":70,"value":7219},"\u003COutlet \u002F>",{"type":64,"tag":6985,"props":7221,"children":7222},{},[7223],{"type":64,"tag":94,"props":7224,"children":7226},{"className":7225},[],[7227],{"type":70,"value":7219},{"type":64,"tag":6964,"props":7229,"children":7230},{},[7231,7240],{"type":64,"tag":6985,"props":7232,"children":7233},{},[7234],{"type":64,"tag":94,"props":7235,"children":7237},{"className":7236},[],[7238],{"type":70,"value":7239},"loader({ params })",{"type":64,"tag":6985,"props":7241,"children":7242},{},[7243,7249],{"type":64,"tag":94,"props":7244,"children":7246},{"className":7245},[],[7247],{"type":70,"value":7248},"loader: ({ params }) => ...",{"type":70,"value":7250}," (route option)",{"type":64,"tag":6964,"props":7252,"children":7253},{},[7254,7263],{"type":64,"tag":6985,"props":7255,"children":7256},{},[7257],{"type":64,"tag":94,"props":7258,"children":7260},{"className":7259},[],[7261],{"type":70,"value":7262},"action({ request })",{"type":64,"tag":6985,"props":7264,"children":7265},{},[7266],{"type":70,"value":7267},"Use mutations \u002F form libraries",{"type":64,"tag":6964,"props":7269,"children":7270},{},[7271,7280],{"type":64,"tag":6985,"props":7272,"children":7273},{},[7274],{"type":64,"tag":94,"props":7275,"children":7277},{"className":7276},[],[7278],{"type":70,"value":7279},"lazy(() => import(...))",{"type":64,"tag":6985,"props":7281,"children":7282},{},[7283,7289,7290,7295],{"type":64,"tag":94,"props":7284,"children":7286},{"className":7285},[],[7287],{"type":70,"value":7288},"autoCodeSplitting",{"type":70,"value":718},{"type":64,"tag":94,"props":7291,"children":7293},{"className":7292},[],[7294],{"type":70,"value":5897},{"type":70,"value":7296}," files",{"type":64,"tag":6964,"props":7298,"children":7299},{},[7300,7309],{"type":64,"tag":6985,"props":7301,"children":7302},{},[7303],{"type":64,"tag":94,"props":7304,"children":7306},{"className":7305},[],[7307],{"type":70,"value":7308},":paramName",{"type":64,"tag":6985,"props":7310,"children":7311},{},[7312],{"type":64,"tag":94,"props":7313,"children":7315},{"className":7314},[],[7316],{"type":70,"value":7317},"$paramName",{"type":64,"tag":6964,"props":7319,"children":7320},{},[7321,7332],{"type":64,"tag":6985,"props":7322,"children":7323},{},[7324,7330],{"type":64,"tag":94,"props":7325,"children":7327},{"className":7326},[],[7328],{"type":70,"value":7329},"*",{"type":70,"value":7331}," (splat)",{"type":64,"tag":6985,"props":7333,"children":7334},{},[7335,7340,7342,7348],{"type":64,"tag":94,"props":7336,"children":7338},{"className":7337},[],[7339],{"type":70,"value":6940},{"type":70,"value":7341}," (splat, accessed via ",{"type":64,"tag":94,"props":7343,"children":7345},{"className":7344},[],[7346],{"type":70,"value":7347},"_splat",{"type":70,"value":595},{"type":64,"tag":7350,"props":7351,"children":7352},"style",{},[7353],{"type":70,"value":7354},"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":7356,"total":7461},[7357,7374,7389,7404,7417,7436,7447],{"slug":7358,"name":7358,"fn":7359,"description":7360,"org":7361,"tags":7362,"stars":23,"repoUrl":24,"updatedAt":7373},"auth-and-guards","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},[7363,7366,7369,7371,7372],{"name":7364,"slug":7365,"type":15},"Auth","auth",{"name":7367,"slug":7368,"type":15},"Frontend","frontend",{"name":7370,"slug":35,"type":15},"Routing",{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:27:07.639032",{"slug":7375,"name":7375,"fn":7376,"description":7377,"org":7378,"tags":7379,"stars":23,"repoUrl":24,"updatedAt":7388},"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},[7380,7381,7384,7387],{"name":7364,"slug":7365,"type":15},{"name":7382,"slug":7383,"type":15},"OAuth","oauth",{"name":7385,"slug":7386,"type":15},"Security","security",{"name":9,"slug":8,"type":15},"2026-07-30T05:26:59.504396",{"slug":5861,"name":5861,"fn":7390,"description":7391,"org":7392,"tags":7393,"stars":23,"repoUrl":24,"updatedAt":7403},"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},[7394,7397,7398,7401,7402],{"name":7395,"slug":7396,"type":15},"Engineering","engineering",{"name":7367,"slug":7368,"type":15},{"name":7399,"slug":7400,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:27:11.494406",{"slug":7405,"name":7405,"fn":7406,"description":7407,"org":7408,"tags":7409,"stars":23,"repoUrl":24,"updatedAt":7416},"data-loading","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},[7410,7413,7414,7415],{"name":7411,"slug":7412,"type":15},"Caching","caching",{"name":7399,"slug":7400,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},"2026-07-30T05:26:54.487943",{"slug":7418,"name":7418,"fn":7419,"description":7420,"org":7421,"tags":7422,"stars":23,"repoUrl":24,"updatedAt":7435},"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},[7423,7426,7428,7431,7432],{"name":7424,"slug":7425,"type":15},"Cloudflare","cloudflare",{"name":7427,"slug":7418,"type":15},"Deployment",{"name":7429,"slug":7430,"type":15},"Netlify","netlify",{"name":9,"slug":8,"type":15},{"name":7433,"slug":7434,"type":15},"Vercel","vercel","2026-07-30T05:26:50.509927",{"slug":7437,"name":7437,"fn":7438,"description":7439,"org":7440,"tags":7441,"stars":23,"repoUrl":24,"updatedAt":7446},"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},[7442,7445],{"name":7443,"slug":7444,"type":15},"Architecture","architecture",{"name":9,"slug":8,"type":15},"2026-07-30T05:27:04.558441",{"slug":7448,"name":7448,"fn":7449,"description":7450,"org":7451,"tags":7452,"stars":23,"repoUrl":24,"updatedAt":7460},"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},[7453,7456,7457,7459],{"name":7454,"slug":7455,"type":15},"Backend","backend",{"name":7367,"slug":7368,"type":15},{"name":7458,"slug":7448,"type":15},"Middleware",{"name":9,"slug":8,"type":15},"2026-07-30T05:26:58.546019",30,{"items":7463,"total":7601},[7464,7478,7490,7502,7515,7527,7537,7547,7560,7570,7581,7591],{"slug":7465,"name":7465,"fn":7466,"description":7467,"org":7468,"tags":7469,"stars":7475,"repoUrl":7476,"updatedAt":7477},"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},[7470,7473,7474],{"name":7471,"slug":7472,"type":15},"Data Analysis","data-analysis",{"name":7367,"slug":7368,"type":15},{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:25:59.429787",{"slug":7479,"name":7479,"fn":7480,"description":7481,"org":7482,"tags":7483,"stars":7475,"repoUrl":7476,"updatedAt":7489},"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},[7484,7487,7488],{"name":7485,"slug":7486,"type":15},"Debugging","debugging",{"name":7367,"slug":7368,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":7491,"name":7491,"fn":7492,"description":7493,"org":7494,"tags":7495,"stars":7475,"repoUrl":7476,"updatedAt":7501},"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},[7496,7497,7498],{"name":7471,"slug":7472,"type":15},{"name":9,"slug":8,"type":15},{"name":7499,"slug":7500,"type":15},"UI Components","ui-components","2026-07-30T05:25:38.403427",{"slug":7503,"name":7503,"fn":7504,"description":7505,"org":7506,"tags":7507,"stars":7475,"repoUrl":7476,"updatedAt":7514},"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},[7508,7511,7512,7513],{"name":7509,"slug":7510,"type":15},"Data Pipeline","data-pipeline",{"name":7367,"slug":7368,"type":15},{"name":7399,"slug":7400,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":7516,"name":7516,"fn":7517,"description":7518,"org":7519,"tags":7520,"stars":7475,"repoUrl":7476,"updatedAt":7526},"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},[7521,7524,7525],{"name":7522,"slug":7523,"type":15},"Data Visualization","data-visualization",{"name":7367,"slug":7368,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":7528,"name":7528,"fn":7529,"description":7530,"org":7531,"tags":7532,"stars":7475,"repoUrl":7476,"updatedAt":7536},"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},[7533,7534,7535],{"name":7471,"slug":7472,"type":15},{"name":7367,"slug":7368,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":7538,"name":7538,"fn":7539,"description":7540,"org":7541,"tags":7542,"stars":7475,"repoUrl":7476,"updatedAt":7546},"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},[7543,7544,7545],{"name":7367,"slug":7368,"type":15},{"name":9,"slug":8,"type":15},{"name":7499,"slug":7500,"type":15},"2026-07-30T05:26:03.37801",{"slug":7548,"name":7548,"fn":7549,"description":7550,"org":7551,"tags":7552,"stars":7475,"repoUrl":7476,"updatedAt":7559},"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},[7553,7556,7557,7558],{"name":7554,"slug":7555,"type":15},"CSS","css",{"name":7367,"slug":7368,"type":15},{"name":9,"slug":8,"type":15},{"name":7499,"slug":7500,"type":15},"2026-07-30T05:25:55.377366",{"slug":7561,"name":7561,"fn":7562,"description":7563,"org":7564,"tags":7565,"stars":7475,"repoUrl":7476,"updatedAt":7569},"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},[7566,7567,7568],{"name":7367,"slug":7368,"type":15},{"name":9,"slug":8,"type":15},{"name":7499,"slug":7500,"type":15},"2026-07-30T05:25:51.400011",{"slug":7571,"name":7571,"fn":7572,"description":7573,"org":7574,"tags":7575,"stars":7475,"repoUrl":7476,"updatedAt":7580},"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},[7576,7577,7578,7579],{"name":7554,"slug":7555,"type":15},{"name":7367,"slug":7368,"type":15},{"name":9,"slug":8,"type":15},{"name":7499,"slug":7500,"type":15},"2026-07-30T05:25:48.703799",{"slug":7582,"name":7582,"fn":7583,"description":7584,"org":7585,"tags":7586,"stars":7475,"repoUrl":7476,"updatedAt":7590},"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},[7587,7588,7589],{"name":7367,"slug":7368,"type":15},{"name":9,"slug":8,"type":15},{"name":7499,"slug":7500,"type":15},"2026-07-30T05:25:47.367943",{"slug":7592,"name":7592,"fn":7593,"description":7594,"org":7595,"tags":7596,"stars":7475,"repoUrl":7476,"updatedAt":7600},"core","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},[7597,7598,7599],{"name":7471,"slug":7472,"type":15},{"name":7367,"slug":7368,"type":15},{"name":7499,"slug":7500,"type":15},"2026-07-30T05:25:52.366295",125]