@tanstack/react-router 1.161.1 → 1.161.4

package/dist/cjs/RouterProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RouterProvider.cjs","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Matches } from './Matches'\nimport { getRouterContext } from './routerContext'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  RouterOptions,\n} from '@tanstack/router-core'\n\n/**\n * Low-level provider that places the router into React context and optionally\n * updates router options from props. Most apps should use `RouterProvider`.\n */\nexport function RouterContextProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({\n  router,\n  children,\n  ...rest\n}: RouterProps<TRouter, TDehydrated> & {\n  children: React.ReactNode\n}) {\n  if (Object.keys(rest).length > 0) {\n    // Allow the router to update options on the router instance\n    router.update({\n      ...router.options,\n      ...rest,\n      context: {\n        ...router.options.context,\n        ...rest.context,\n      },\n    } as any)\n  }\n\n  const routerContext = getRouterContext()\n\n  const provider = (\n    <routerContext.Provider value={router as AnyRouter}>\n      {children}\n    </routerContext.Provider>\n  )\n\n  if (router.options.Wrap) {\n    return <router.options.Wrap>{provider}</router.options.Wrap>\n  }\n\n  return provider\n}\n\n/**\n * Top-level component that renders the active route matches and provides the\n * router to the React tree via context.\n *\n * Accepts the same options as `createRouter` via props to update the router\n * instance after creation.\n *\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRouterFunction\n */\nexport function RouterProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({ router, ...rest }: RouterProps<TRouter, TDehydrated>) {\n  return (\n    <RouterContextProvider router={router} {...rest}>\n      <Matches />\n    </RouterContextProvider>\n  )\n}\n\nexport type RouterProps<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n> = Omit<\n  RouterOptions<\n    TRouter['routeTree'],\n    NonNullable<TRouter['options']['trailingSlash']>,\n    NonNullable<TRouter['options']['defaultStructuralSharing']>,\n    TRouter['history'],\n    TDehydrated\n  >,\n  'context'\n> & {\n  router: TRouter\n  context?: Partial<\n    RouterOptions<\n      TRouter['routeTree'],\n      NonNullable<TRouter['options']['trailingSlash']>,\n      NonNullable<TRouter['options']['defaultStructuralSharing']>,\n      TRouter['history'],\n      TDehydrated\n    >['context']\n  >\n}\n"],"names":["routerContext","getRouterContext","jsx","Matches"],"mappings":";;;;;AAaO,SAAS,sBAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AACD,MAAI,OAAO,KAAK,IAAI,EAAE,SAAS,GAAG;AAEhC,WAAO,OAAO;AAAA,MACZ,GAAG,OAAO;AAAA,MACV,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,OAAO,QAAQ;AAAA,QAClB,GAAG,KAAK;AAAA,MAAA;AAAA,IACV,CACM;AAAA,EACV;AAEA,QAAMA,kBAAgBC,cAAAA,iBAAA;AAEtB,QAAM,WACJC,2BAAAA,IAACF,gBAAc,UAAd,EAAuB,OAAO,QAC5B,UACH;AAGF,MAAI,OAAO,QAAQ,MAAM;AACvB,WAAOE,2BAAAA,IAAC,OAAO,QAAQ,MAAf,EAAqB,UAAA,UAAS;AAAA,EACxC;AAEA,SAAO;AACT;AAWO,SAAS,eAGd,EAAE,QAAQ,GAAG,QAA2C;AACxD,wCACG,uBAAA,EAAsB,QAAiB,GAAG,MACzC,UAAAA,+BAACC,QAAAA,WAAQ,GACX;AAEJ;;;"}
+{"version":3,"file":"RouterProvider.cjs","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Matches } from './Matches'\nimport { getRouterContext } from './routerContext'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  RouterOptions,\n} from '@tanstack/router-core'\n\n/**\n * Low-level provider that places the router into React context and optionally\n * updates router options from props. Most apps should use `RouterProvider`.\n */\nexport function RouterContextProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({\n  router,\n  children,\n  ...rest\n}: RouterProps<TRouter, TDehydrated> & {\n  children: React.ReactNode\n}) {\n  if (Object.keys(rest).length > 0) {\n    // Allow the router to update options on the router instance\n    router.update({\n      ...router.options,\n      ...rest,\n      context: {\n        ...router.options.context,\n        ...rest.context,\n      },\n    })\n  }\n\n  const routerContext = getRouterContext()\n\n  const provider = (\n    <routerContext.Provider value={router as AnyRouter}>\n      {children}\n    </routerContext.Provider>\n  )\n\n  if (router.options.Wrap) {\n    return <router.options.Wrap>{provider}</router.options.Wrap>\n  }\n\n  return provider\n}\n\n/**\n * Top-level component that renders the active route matches and provides the\n * router to the React tree via context.\n *\n * Accepts the same options as `createRouter` via props to update the router\n * instance after creation.\n *\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRouterFunction\n */\nexport function RouterProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({ router, ...rest }: RouterProps<TRouter, TDehydrated>) {\n  return (\n    <RouterContextProvider router={router} {...rest}>\n      <Matches />\n    </RouterContextProvider>\n  )\n}\n\nexport type RouterProps<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n> = Omit<\n  RouterOptions<\n    TRouter['routeTree'],\n    NonNullable<TRouter['options']['trailingSlash']>,\n    NonNullable<TRouter['options']['defaultStructuralSharing']>,\n    TRouter['history'],\n    TDehydrated\n  >,\n  'context'\n> & {\n  router: TRouter\n  context?: Partial<\n    RouterOptions<\n      TRouter['routeTree'],\n      NonNullable<TRouter['options']['trailingSlash']>,\n      NonNullable<TRouter['options']['defaultStructuralSharing']>,\n      TRouter['history'],\n      TDehydrated\n    >['context']\n  >\n}\n"],"names":["routerContext","getRouterContext","jsx","Matches"],"mappings":";;;;;AAaO,SAAS,sBAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AACD,MAAI,OAAO,KAAK,IAAI,EAAE,SAAS,GAAG;AAEhC,WAAO,OAAO;AAAA,MACZ,GAAG,OAAO;AAAA,MACV,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,OAAO,QAAQ;AAAA,QAClB,GAAG,KAAK;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EACH;AAEA,QAAMA,kBAAgBC,cAAAA,iBAAA;AAEtB,QAAM,WACJC,2BAAAA,IAACF,gBAAc,UAAd,EAAuB,OAAO,QAC5B,UACH;AAGF,MAAI,OAAO,QAAQ,MAAM;AACvB,WAAOE,2BAAAA,IAAC,OAAO,QAAQ,MAAf,EAAqB,UAAA,UAAS;AAAA,EACxC;AAEA,SAAO;AACT;AAWO,SAAS,eAGd,EAAE,QAAQ,GAAG,QAA2C;AACxD,wCACG,uBAAA,EAAsB,QAAiB,GAAG,MACzC,UAAAA,+BAACC,QAAAA,WAAQ,GACX;AAEJ;;;"}

package/dist/cjs/route.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"route.cjs","sources":["../../src/route.tsx"],"sourcesContent":["import {\n  BaseRootRoute,\n  BaseRoute,\n  BaseRouteApi,\n  notFound,\n} from '@tanstack/router-core'\nimport React from 'react'\nimport { useLoaderData } from './useLoaderData'\nimport { useLoaderDeps } from './useLoaderDeps'\nimport { useParams } from './useParams'\nimport { useSearch } from './useSearch'\nimport { useNavigate } from './useNavigate'\nimport { useMatch } from './useMatch'\nimport { useRouter } from './useRouter'\nimport { Link } from './link'\nimport type {\n  AnyContext,\n  AnyRoute,\n  AnyRouter,\n  ConstrainLiteral,\n  ErrorComponentProps,\n  NotFoundError,\n  NotFoundRouteProps,\n  Register,\n  RegisteredRouter,\n  ResolveFullPath,\n  ResolveId,\n  ResolveParams,\n  RootRoute as RootRouteCore,\n  RootRouteId,\n  RootRouteOptions,\n  RouteConstraints,\n  Route as RouteCore,\n  RouteIds,\n  RouteMask,\n  RouteOptions,\n  RouteTypesById,\n  RouterCore,\n  ToMaskOptions,\n  UseNavigateResult,\n} from '@tanstack/router-core'\nimport type { UseLoaderDataRoute } from './useLoaderData'\nimport type { UseMatchRoute } from './useMatch'\nimport type { UseLoaderDepsRoute } from './useLoaderDeps'\nimport type { UseParamsRoute } from './useParams'\nimport type { UseSearchRoute } from './useSearch'\nimport type { UseRouteContextRoute } from './useRouteContext'\nimport type { LinkComponentRoute } from './link'\n\ndeclare module '@tanstack/router-core' {\n  export interface UpdatableRouteOptionsExtensions {\n    component?: RouteComponent\n    errorComponent?: false | null | undefined | ErrorRouteComponent\n    notFoundComponent?: NotFoundRouteComponent\n    pendingComponent?: RouteComponent\n  }\n\n  export interface RootRouteOptionsExtensions {\n    shellComponent?: ({\n      children,\n    }: {\n      children: React.ReactNode\n    }) => React.ReactNode\n  }\n\n  export interface RouteExtensions<\n    in out TId extends string,\n    in out TFullPath extends string,\n  > {\n    useMatch: UseMatchRoute<TId>\n    useRouteContext: UseRouteContextRoute<TId>\n    useSearch: UseSearchRoute<TId>\n    useParams: UseParamsRoute<TId>\n    useLoaderDeps: UseLoaderDepsRoute<TId>\n    useLoaderData: UseLoaderDataRoute<TId>\n    useNavigate: () => UseNavigateResult<TFullPath>\n    Link: LinkComponentRoute<TFullPath>\n  }\n}\n\n/**\n * Returns a route-specific API that exposes type-safe hooks pre-bound\n * to a single route ID. Useful for consuming a route's APIs from files\n * where the route object isn't directly imported (e.g. code-split files).\n *\n * @param id Route ID string literal for the target route.\n * @returns A `RouteApi` instance bound to the given route ID.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/getRouteApiFunction\n */\nexport function getRouteApi<\n  const TId,\n  TRouter extends AnyRouter = RegisteredRouter,\n>(id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>) {\n  return new RouteApi<TId, TRouter>({ id })\n}\n\nexport class RouteApi<\n  TId,\n  TRouter extends AnyRouter = RegisteredRouter,\n> extends BaseRouteApi<TId, TRouter> {\n  /**\n   * @deprecated Use the `getRouteApi` function instead.\n   */\n  constructor({ id }: { id: TId }) {\n    super({ id })\n  }\n\n  useMatch: UseMatchRoute<TId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<TId> = (opts) => {\n    return useMatch({\n      from: this.id as any,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id, strict: false } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id, strict: false } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<\n    RouteTypesById<TRouter, TId>['fullPath']\n  > => {\n    const router = useRouter()\n    return useNavigate({ from: router.routesById[this.id as string].fullPath })\n  }\n\n  notFound = (opts?: NotFoundError) => {\n    return notFound({ routeId: this.id as string, ...opts })\n  }\n\n  Link: LinkComponentRoute<RouteTypesById<TRouter, TId>['fullPath']> =\n    React.forwardRef((props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      const router = useRouter()\n      const fullPath = router.routesById[this.id as string].fullPath\n      return <Link ref={ref} from={fullPath as never} {...props} />\n    }) as unknown as LinkComponentRoute<\n      RouteTypesById<TRouter, TId>['fullPath']\n    >\n}\n\nexport class Route<\n  in out TRegister = unknown,\n  in out TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,\n  in out TPath extends RouteConstraints['TPath'] = '/',\n  in out TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<\n    TParentRoute,\n    TPath\n  >,\n  in out TCustomId extends RouteConstraints['TCustomId'] = string,\n  in out TId extends RouteConstraints['TId'] = ResolveId<\n    TParentRoute,\n    TCustomId,\n    TPath\n  >,\n  in out TSearchValidator = undefined,\n  in out TParams = ResolveParams<TPath>,\n  in out TRouterContext = AnyContext,\n  in out TRouteContextFn = AnyContext,\n  in out TBeforeLoadFn = AnyContext,\n  in out TLoaderDeps extends Record<string, any> = {},\n  in out TLoaderFn = undefined,\n  in out TChildren = unknown,\n  in out TFileRouteTypes = unknown,\n  in out TSSR = unknown,\n  in out TServerMiddlewares = unknown,\n  in out THandlers = undefined,\n>\n  extends BaseRoute<\n    TRegister,\n    TParentRoute,\n    TPath,\n    TFullPath,\n    TCustomId,\n    TId,\n    TSearchValidator,\n    TParams,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TFileRouteTypes,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >\n  implements\n    RouteCore<\n      TRegister,\n      TParentRoute,\n      TPath,\n      TFullPath,\n      TCustomId,\n      TId,\n      TSearchValidator,\n      TParams,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TChildren,\n      TFileRouteTypes,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >\n{\n  /**\n   * @deprecated Use the `createRoute` function instead.\n   */\n  constructor(\n    options?: RouteOptions<\n      TRegister,\n      TParentRoute,\n      TId,\n      TCustomId,\n      TFullPath,\n      TPath,\n      TSearchValidator,\n      TParams,\n      TLoaderDeps,\n      TLoaderFn,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >,\n  ) {\n    super(options)\n    ;(this as any).$$typeof = Symbol.for('react.memo')\n  }\n\n  useMatch: UseMatchRoute<TId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<TId> = (opts?) => {\n    return useMatch({\n      ...opts,\n      from: this.id,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<TFullPath> => {\n    return useNavigate({ from: this.fullPath })\n  }\n\n  Link: LinkComponentRoute<TFullPath> = React.forwardRef(\n    (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      return <Link ref={ref} from={this.fullPath as never} {...props} />\n    },\n  ) as unknown as LinkComponentRoute<TFullPath>\n}\n\n/**\n * Creates a non-root Route instance for code-based routing.\n *\n * Use this to define a route that will be composed into a route tree\n * (typically via a parent route's `addChildren`). If you're using file-based\n * routing, prefer `createFileRoute`.\n *\n * @param options Route options (path, component, loader, context, etc.).\n * @returns A Route instance to be attached to the route tree.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRouteFunction\n */\nexport function createRoute<\n  TRegister = unknown,\n  TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,\n  TPath extends RouteConstraints['TPath'] = '/',\n  TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<\n    TParentRoute,\n    TPath\n  >,\n  TCustomId extends RouteConstraints['TCustomId'] = string,\n  TId extends RouteConstraints['TId'] = ResolveId<\n    TParentRoute,\n    TCustomId,\n    TPath\n  >,\n  TSearchValidator = undefined,\n  TParams = ResolveParams<TPath>,\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TChildren = unknown,\n  TSSR = unknown,\n  const TServerMiddlewares = unknown,\n>(\n  options: RouteOptions<\n    TRegister,\n    TParentRoute,\n    TId,\n    TCustomId,\n    TFullPath,\n    TPath,\n    TSearchValidator,\n    TParams,\n    TLoaderDeps,\n    TLoaderFn,\n    AnyContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TSSR,\n    TServerMiddlewares\n  >,\n): Route<\n  TRegister,\n  TParentRoute,\n  TPath,\n  TFullPath,\n  TCustomId,\n  TId,\n  TSearchValidator,\n  TParams,\n  AnyContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  TChildren,\n  TSSR,\n  TServerMiddlewares\n> {\n  return new Route<\n    TRegister,\n    TParentRoute,\n    TPath,\n    TFullPath,\n    TCustomId,\n    TId,\n    TSearchValidator,\n    TParams,\n    AnyContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TSSR,\n    TServerMiddlewares\n  >(\n    // TODO: Help us TypeChris, you're our only hope!\n    options as any,\n  )\n}\n\nexport type AnyRootRoute = RootRoute<\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any\n>\n\n/**\n * Creates a root route factory that requires a router context type.\n *\n * Use when your root route expects `context` to be provided to `createRouter`.\n * The returned function behaves like `createRootRoute` but enforces a context type.\n *\n * @returns A factory function to configure and return a root route.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRootRouteWithContextFunction\n */\nexport function createRootRouteWithContext<TRouterContext extends {}>() {\n  return <\n    TRegister = Register,\n    TRouteContextFn = AnyContext,\n    TBeforeLoadFn = AnyContext,\n    TSearchValidator = undefined,\n    TLoaderDeps extends Record<string, any> = {},\n    TLoaderFn = undefined,\n    TSSR = unknown,\n    TServerMiddlewares = unknown,\n  >(\n    options?: RootRouteOptions<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares\n    >,\n  ) => {\n    return createRootRoute<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares\n    >(options as any)\n  }\n}\n\n/**\n * @deprecated Use the `createRootRouteWithContext` function instead.\n */\nexport const rootRouteWithContext = createRootRouteWithContext\n\nexport class RootRoute<\n  in out TRegister = unknown,\n  in out TSearchValidator = undefined,\n  in out TRouterContext = {},\n  in out TRouteContextFn = AnyContext,\n  in out TBeforeLoadFn = AnyContext,\n  in out TLoaderDeps extends Record<string, any> = {},\n  in out TLoaderFn = undefined,\n  in out TChildren = unknown,\n  in out TFileRouteTypes = unknown,\n  in out TSSR = unknown,\n  in out TServerMiddlewares = unknown,\n  in out THandlers = undefined,\n>\n  extends BaseRootRoute<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TFileRouteTypes,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >\n  implements\n    RootRouteCore<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TChildren,\n      TFileRouteTypes,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >\n{\n  /**\n   * @deprecated `RootRoute` is now an internal implementation detail. Use `createRootRoute()` instead.\n   */\n  constructor(\n    options?: RootRouteOptions<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >,\n  ) {\n    super(options)\n    ;(this as any).$$typeof = Symbol.for('react.memo')\n  }\n\n  useMatch: UseMatchRoute<RootRouteId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<RootRouteId> = (opts) => {\n    return useMatch({\n      ...opts,\n      from: this.id,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<RootRouteId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<RootRouteId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<RootRouteId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<RootRouteId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<'/'> => {\n    return useNavigate({ from: this.fullPath })\n  }\n\n  Link: LinkComponentRoute<'/'> = React.forwardRef(\n    (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      return <Link ref={ref} from={this.fullPath} {...props} />\n    },\n  ) as unknown as LinkComponentRoute<'/'>\n}\n\n/**\n * Creates a root Route instance used to build your route tree.\n *\n * Typically paired with `createRouter({ routeTree })`. If you need to require\n * a typed router context, use `createRootRouteWithContext` instead.\n *\n * @param options Root route options (component, error, pending, etc.).\n * @returns A root route instance.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRootRouteFunction\n */\nexport function createRootRoute<\n  TRegister = Register,\n  TSearchValidator = undefined,\n  TRouterContext = {},\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TSSR = unknown,\n  const TServerMiddlewares = unknown,\n  THandlers = undefined,\n>(\n  options?: RootRouteOptions<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >,\n): RootRoute<\n  TRegister,\n  TSearchValidator,\n  TRouterContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  unknown,\n  unknown,\n  TSSR,\n  TServerMiddlewares,\n  THandlers\n> {\n  return new RootRoute<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    unknown,\n    unknown,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >(options)\n}\n\nexport function createRouteMask<\n  TRouteTree extends AnyRoute,\n  TFrom extends string,\n  TTo extends string,\n>(\n  opts: {\n    routeTree: TRouteTree\n  } & ToMaskOptions<RouterCore<TRouteTree, 'never', boolean>, TFrom, TTo>,\n): RouteMask<TRouteTree> {\n  return opts as any\n}\n\nexport interface DefaultRouteTypes<TProps> {\n  component:\n    | ((props: TProps) => any)\n    | React.LazyExoticComponent<(props: TProps) => any>\n}\nexport interface RouteTypes<TProps> extends DefaultRouteTypes<TProps> {}\n\nexport type AsyncRouteComponent<TProps> = RouteTypes<TProps>['component'] & {\n  preload?: () => Promise<void>\n}\n\nexport type RouteComponent = AsyncRouteComponent<{}>\n\nexport type ErrorRouteComponent = AsyncRouteComponent<ErrorComponentProps>\n\nexport type NotFoundRouteComponent = RouteTypes<NotFoundRouteProps>['component']\n\nexport class NotFoundRoute<\n  TRegister,\n  TParentRoute extends AnyRootRoute,\n  TRouterContext = AnyContext,\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TSearchValidator = undefined,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TChildren = unknown,\n  TSSR = unknown,\n  TServerMiddlewares = unknown,\n> extends Route<\n  TRegister,\n  TParentRoute,\n  '/404',\n  '/404',\n  '404',\n  '404',\n  TSearchValidator,\n  {},\n  TRouterContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  TChildren,\n  TSSR,\n  TServerMiddlewares\n> {\n  constructor(\n    options: Omit<\n      RouteOptions<\n        TRegister,\n        TParentRoute,\n        string,\n        string,\n        string,\n        string,\n        TSearchValidator,\n        {},\n        TLoaderDeps,\n        TLoaderFn,\n        TRouterContext,\n        TRouteContextFn,\n        TBeforeLoadFn,\n        TSSR,\n        TServerMiddlewares\n      >,\n      | 'caseSensitive'\n      | 'parseParams'\n      | 'stringifyParams'\n      | 'path'\n      | 'id'\n      | 'params'\n    >,\n  ) {\n    super({\n      ...(options as any),\n      id: '404',\n    })\n  }\n}\n"],"names":["BaseRouteApi","useMatch","useSearch","useParams","useLoaderDeps","useLoaderData","useRouter","useNavigate","notFound","Link","BaseRoute","BaseRootRoute"],"mappings":"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"}
+{"version":3,"file":"route.cjs","sources":["../../src/route.tsx"],"sourcesContent":["import {\n  BaseRootRoute,\n  BaseRoute,\n  BaseRouteApi,\n  notFound,\n} from '@tanstack/router-core'\nimport React from 'react'\nimport { useLoaderData } from './useLoaderData'\nimport { useLoaderDeps } from './useLoaderDeps'\nimport { useParams } from './useParams'\nimport { useSearch } from './useSearch'\nimport { useNavigate } from './useNavigate'\nimport { useMatch } from './useMatch'\nimport { useRouter } from './useRouter'\nimport { Link } from './link'\nimport type {\n  AnyContext,\n  AnyRoute,\n  AnyRouter,\n  ConstrainLiteral,\n  ErrorComponentProps,\n  NotFoundError,\n  NotFoundRouteProps,\n  Register,\n  RegisteredRouter,\n  ResolveFullPath,\n  ResolveId,\n  ResolveParams,\n  RootRoute as RootRouteCore,\n  RootRouteId,\n  RootRouteOptions,\n  RouteConstraints,\n  Route as RouteCore,\n  RouteIds,\n  RouteMask,\n  RouteOptions,\n  RouteTypesById,\n  RouterCore,\n  ToMaskOptions,\n  UseNavigateResult,\n} from '@tanstack/router-core'\nimport type { UseLoaderDataRoute } from './useLoaderData'\nimport type { UseMatchRoute } from './useMatch'\nimport type { UseLoaderDepsRoute } from './useLoaderDeps'\nimport type { UseParamsRoute } from './useParams'\nimport type { UseSearchRoute } from './useSearch'\nimport type { UseRouteContextRoute } from './useRouteContext'\nimport type { LinkComponentRoute } from './link'\n\ndeclare module '@tanstack/router-core' {\n  export interface UpdatableRouteOptionsExtensions {\n    component?: RouteComponent\n    errorComponent?: false | null | undefined | ErrorRouteComponent\n    notFoundComponent?: NotFoundRouteComponent\n    pendingComponent?: RouteComponent\n  }\n\n  export interface RootRouteOptionsExtensions {\n    shellComponent?: ({\n      children,\n    }: {\n      children: React.ReactNode\n    }) => React.ReactNode\n  }\n\n  export interface RouteExtensions<\n    in out TId extends string,\n    in out TFullPath extends string,\n  > {\n    useMatch: UseMatchRoute<TId>\n    useRouteContext: UseRouteContextRoute<TId>\n    useSearch: UseSearchRoute<TId>\n    useParams: UseParamsRoute<TId>\n    useLoaderDeps: UseLoaderDepsRoute<TId>\n    useLoaderData: UseLoaderDataRoute<TId>\n    useNavigate: () => UseNavigateResult<TFullPath>\n    Link: LinkComponentRoute<TFullPath>\n  }\n}\n\n/**\n * Returns a route-specific API that exposes type-safe hooks pre-bound\n * to a single route ID. Useful for consuming a route's APIs from files\n * where the route object isn't directly imported (e.g. code-split files).\n *\n * @param id Route ID string literal for the target route.\n * @returns A `RouteApi` instance bound to the given route ID.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/getRouteApiFunction\n */\nexport function getRouteApi<\n  const TId,\n  TRouter extends AnyRouter = RegisteredRouter,\n>(id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>) {\n  return new RouteApi<TId, TRouter>({ id })\n}\n\nexport class RouteApi<\n  TId,\n  TRouter extends AnyRouter = RegisteredRouter,\n> extends BaseRouteApi<TId, TRouter> {\n  /**\n   * @deprecated Use the `getRouteApi` function instead.\n   */\n  constructor({ id }: { id: TId }) {\n    super({ id })\n  }\n\n  useMatch: UseMatchRoute<TId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<TId> = (opts) => {\n    return useMatch({\n      from: this.id as any,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id, strict: false } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id, strict: false } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<\n    RouteTypesById<TRouter, TId>['fullPath']\n  > => {\n    const router = useRouter()\n    return useNavigate({ from: router.routesById[this.id as string].fullPath })\n  }\n\n  notFound = (opts?: NotFoundError) => {\n    return notFound({ routeId: this.id as string, ...opts })\n  }\n\n  Link: LinkComponentRoute<RouteTypesById<TRouter, TId>['fullPath']> =\n    React.forwardRef((props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      const router = useRouter()\n      const fullPath = router.routesById[this.id as string].fullPath\n      return <Link ref={ref} from={fullPath as never} {...props} />\n    }) as unknown as LinkComponentRoute<\n      RouteTypesById<TRouter, TId>['fullPath']\n    >\n}\n\nexport class Route<\n  in out TRegister = unknown,\n  in out TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,\n  in out TPath extends RouteConstraints['TPath'] = '/',\n  in out TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<\n    TParentRoute,\n    TPath\n  >,\n  in out TCustomId extends RouteConstraints['TCustomId'] = string,\n  in out TId extends RouteConstraints['TId'] = ResolveId<\n    TParentRoute,\n    TCustomId,\n    TPath\n  >,\n  in out TSearchValidator = undefined,\n  in out TParams = ResolveParams<TPath>,\n  in out TRouterContext = AnyContext,\n  in out TRouteContextFn = AnyContext,\n  in out TBeforeLoadFn = AnyContext,\n  in out TLoaderDeps extends Record<string, any> = {},\n  in out TLoaderFn = undefined,\n  in out TChildren = unknown,\n  in out TFileRouteTypes = unknown,\n  in out TSSR = unknown,\n  in out TServerMiddlewares = unknown,\n  in out THandlers = undefined,\n>\n  extends BaseRoute<\n    TRegister,\n    TParentRoute,\n    TPath,\n    TFullPath,\n    TCustomId,\n    TId,\n    TSearchValidator,\n    TParams,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TFileRouteTypes,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >\n  implements\n    RouteCore<\n      TRegister,\n      TParentRoute,\n      TPath,\n      TFullPath,\n      TCustomId,\n      TId,\n      TSearchValidator,\n      TParams,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TChildren,\n      TFileRouteTypes,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >\n{\n  /**\n   * @deprecated Use the `createRoute` function instead.\n   */\n  constructor(\n    options?: RouteOptions<\n      TRegister,\n      TParentRoute,\n      TId,\n      TCustomId,\n      TFullPath,\n      TPath,\n      TSearchValidator,\n      TParams,\n      TLoaderDeps,\n      TLoaderFn,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >,\n  ) {\n    super(options)\n    ;(this as any).$$typeof = Symbol.for('react.memo')\n  }\n\n  useMatch: UseMatchRoute<TId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<TId> = (opts?) => {\n    return useMatch({\n      ...opts,\n      from: this.id,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<TFullPath> => {\n    return useNavigate({ from: this.fullPath })\n  }\n\n  Link: LinkComponentRoute<TFullPath> = React.forwardRef(\n    (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      return <Link ref={ref} from={this.fullPath as never} {...props} />\n    },\n  ) as unknown as LinkComponentRoute<TFullPath>\n}\n\n/**\n * Creates a non-root Route instance for code-based routing.\n *\n * Use this to define a route that will be composed into a route tree\n * (typically via a parent route's `addChildren`). If you're using file-based\n * routing, prefer `createFileRoute`.\n *\n * @param options Route options (path, component, loader, context, etc.).\n * @returns A Route instance to be attached to the route tree.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRouteFunction\n */\nexport function createRoute<\n  TRegister = unknown,\n  TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,\n  TPath extends RouteConstraints['TPath'] = '/',\n  TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<\n    TParentRoute,\n    TPath\n  >,\n  TCustomId extends RouteConstraints['TCustomId'] = string,\n  TId extends RouteConstraints['TId'] = ResolveId<\n    TParentRoute,\n    TCustomId,\n    TPath\n  >,\n  TSearchValidator = undefined,\n  TParams = ResolveParams<TPath>,\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TChildren = unknown,\n  TSSR = unknown,\n  const TServerMiddlewares = unknown,\n>(\n  options: RouteOptions<\n    TRegister,\n    TParentRoute,\n    TId,\n    TCustomId,\n    TFullPath,\n    TPath,\n    TSearchValidator,\n    TParams,\n    TLoaderDeps,\n    TLoaderFn,\n    AnyContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TSSR,\n    TServerMiddlewares\n  >,\n): Route<\n  TRegister,\n  TParentRoute,\n  TPath,\n  TFullPath,\n  TCustomId,\n  TId,\n  TSearchValidator,\n  TParams,\n  AnyContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  TChildren,\n  TSSR,\n  TServerMiddlewares\n> {\n  return new Route<\n    TRegister,\n    TParentRoute,\n    TPath,\n    TFullPath,\n    TCustomId,\n    TId,\n    TSearchValidator,\n    TParams,\n    AnyContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TSSR,\n    TServerMiddlewares\n  >(\n    // TODO: Help us TypeChris, you're our only hope!\n    options as any,\n  )\n}\n\nexport type AnyRootRoute = RootRoute<\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any\n>\n\n/**\n * Creates a root route factory that requires a router context type.\n *\n * Use when your root route expects `context` to be provided to `createRouter`.\n * The returned function behaves like `createRootRoute` but enforces a context type.\n *\n * @returns A factory function to configure and return a root route.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRootRouteWithContextFunction\n */\nexport function createRootRouteWithContext<TRouterContext extends {}>() {\n  return <\n    TRegister = Register,\n    TRouteContextFn = AnyContext,\n    TBeforeLoadFn = AnyContext,\n    TSearchValidator = undefined,\n    TLoaderDeps extends Record<string, any> = {},\n    TLoaderFn = undefined,\n    TSSR = unknown,\n    TServerMiddlewares = unknown,\n  >(\n    options?: RootRouteOptions<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares\n    >,\n  ) => {\n    return createRootRoute<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares\n    >(options)\n  }\n}\n\n/**\n * @deprecated Use the `createRootRouteWithContext` function instead.\n */\nexport const rootRouteWithContext = createRootRouteWithContext\n\nexport class RootRoute<\n  in out TRegister = unknown,\n  in out TSearchValidator = undefined,\n  in out TRouterContext = {},\n  in out TRouteContextFn = AnyContext,\n  in out TBeforeLoadFn = AnyContext,\n  in out TLoaderDeps extends Record<string, any> = {},\n  in out TLoaderFn = undefined,\n  in out TChildren = unknown,\n  in out TFileRouteTypes = unknown,\n  in out TSSR = unknown,\n  in out TServerMiddlewares = unknown,\n  in out THandlers = undefined,\n>\n  extends BaseRootRoute<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TFileRouteTypes,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >\n  implements\n    RootRouteCore<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TChildren,\n      TFileRouteTypes,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >\n{\n  /**\n   * @deprecated `RootRoute` is now an internal implementation detail. Use `createRootRoute()` instead.\n   */\n  constructor(\n    options?: RootRouteOptions<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >,\n  ) {\n    super(options)\n    ;(this as any).$$typeof = Symbol.for('react.memo')\n  }\n\n  useMatch: UseMatchRoute<RootRouteId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<RootRouteId> = (opts) => {\n    return useMatch({\n      ...opts,\n      from: this.id,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<RootRouteId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<RootRouteId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<RootRouteId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<RootRouteId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<'/'> => {\n    return useNavigate({ from: this.fullPath })\n  }\n\n  Link: LinkComponentRoute<'/'> = React.forwardRef(\n    (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      return <Link ref={ref} from={this.fullPath} {...props} />\n    },\n  ) as unknown as LinkComponentRoute<'/'>\n}\n\n/**\n * Creates a root Route instance used to build your route tree.\n *\n * Typically paired with `createRouter({ routeTree })`. If you need to require\n * a typed router context, use `createRootRouteWithContext` instead.\n *\n * @param options Root route options (component, error, pending, etc.).\n * @returns A root route instance.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRootRouteFunction\n */\nexport function createRootRoute<\n  TRegister = Register,\n  TSearchValidator = undefined,\n  TRouterContext = {},\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TSSR = unknown,\n  const TServerMiddlewares = unknown,\n  THandlers = undefined,\n>(\n  options?: RootRouteOptions<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >,\n): RootRoute<\n  TRegister,\n  TSearchValidator,\n  TRouterContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  unknown,\n  unknown,\n  TSSR,\n  TServerMiddlewares,\n  THandlers\n> {\n  return new RootRoute<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    unknown,\n    unknown,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >(options)\n}\n\nexport function createRouteMask<\n  TRouteTree extends AnyRoute,\n  TFrom extends string,\n  TTo extends string,\n>(\n  opts: {\n    routeTree: TRouteTree\n  } & ToMaskOptions<RouterCore<TRouteTree, 'never', boolean>, TFrom, TTo>,\n): RouteMask<TRouteTree> {\n  return opts as any\n}\n\nexport interface DefaultRouteTypes<TProps> {\n  component:\n    | ((props: TProps) => any)\n    | React.LazyExoticComponent<(props: TProps) => any>\n}\nexport interface RouteTypes<TProps> extends DefaultRouteTypes<TProps> {}\n\nexport type AsyncRouteComponent<TProps> = RouteTypes<TProps>['component'] & {\n  preload?: () => Promise<void>\n}\n\nexport type RouteComponent = AsyncRouteComponent<{}>\n\nexport type ErrorRouteComponent = AsyncRouteComponent<ErrorComponentProps>\n\nexport type NotFoundRouteComponent = RouteTypes<NotFoundRouteProps>['component']\n\nexport class NotFoundRoute<\n  TRegister,\n  TParentRoute extends AnyRootRoute,\n  TRouterContext = AnyContext,\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TSearchValidator = undefined,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TChildren = unknown,\n  TSSR = unknown,\n  TServerMiddlewares = unknown,\n> extends Route<\n  TRegister,\n  TParentRoute,\n  '/404',\n  '/404',\n  '404',\n  '404',\n  TSearchValidator,\n  {},\n  TRouterContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  TChildren,\n  TSSR,\n  TServerMiddlewares\n> {\n  constructor(\n    options: Omit<\n      RouteOptions<\n        TRegister,\n        TParentRoute,\n        string,\n        string,\n        string,\n        string,\n        TSearchValidator,\n        {},\n        TLoaderDeps,\n        TLoaderFn,\n        TRouterContext,\n        TRouteContextFn,\n        TBeforeLoadFn,\n        TSSR,\n        TServerMiddlewares\n      >,\n      | 'caseSensitive'\n      | 'parseParams'\n      | 'stringifyParams'\n      | 'path'\n      | 'id'\n      | 'params'\n    >,\n  ) {\n    super({\n      ...(options as any),\n      id: '404',\n    })\n  }\n}\n"],"names":["BaseRouteApi","useMatch","useSearch","useParams","useLoaderDeps","useLoaderData","useRouter","useNavigate","notFound","Link","BaseRoute","BaseRootRoute"],"mappings":";;;;;;;;;;;;;AAyFO,SAAS,YAGd,IAA2D;AAC3D,SAAO,IAAI,SAAuB,EAAE,IAAI;AAC1C;AAEO,MAAM,iBAGHA,WAAAA,aAA2B;AAAA;AAAA;AAAA;AAAA,EAInC,YAAY,EAAE,MAAmB;AAC/B,UAAM,EAAE,IAAI;AAGd,SAAA,WAA+B,CAAC,SAAS;AACvC,aAAOC,kBAAS;AAAA,QACd,QAAQ,MAAM;AAAA,QACd,MAAM,KAAK;AAAA,QACX,mBAAmB,MAAM;AAAA,MAAA,CACnB;AAAA,IACV;AAEA,SAAA,kBAA6C,CAAC,SAAS;AACrD,aAAOA,kBAAS;AAAA,QACd,MAAM,KAAK;AAAA,QACX,QAAQ,CAAC,MAAO,MAAM,SAAS,KAAK,OAAO,EAAE,OAAO,IAAI,EAAE;AAAA,MAAA,CAC3D;AAAA,IACH;AAEA,SAAA,YAAiC,CAAC,SAAS;AAEzC,aAAOC,oBAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,YAAiC,CAAC,SAAS;AAEzC,aAAOC,oBAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,gBAAyC,CAAC,SAAS;AACjD,aAAOC,cAAAA,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAI,QAAQ,OAAc;AAAA,IACvE;AAEA,SAAA,gBAAyC,CAAC,SAAS;AACjD,aAAOC,cAAAA,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAI,QAAQ,OAAc;AAAA,IACvE;AAEA,SAAA,cAAc,MAET;AACH,YAAM,SAASC,UAAAA,UAAA;AACf,aAAOC,YAAAA,YAAY,EAAE,MAAM,OAAO,WAAW,KAAK,EAAY,EAAE,UAAU;AAAA,IAC5E;AAEA,SAAA,WAAW,CAAC,SAAyB;AACnC,aAAOC,WAAAA,SAAS,EAAE,SAAS,KAAK,IAAc,GAAG,MAAM;AAAA,IACzD;AAEA,SAAA,OACE,MAAM,WAAW,CAAC,OAAO,QAA+C;AACtE,YAAM,SAASF,UAAAA,UAAA;AACf,YAAM,WAAW,OAAO,WAAW,KAAK,EAAY,EAAE;AACtD,4CAAQG,KAAAA,MAAA,EAAK,KAAU,MAAM,UAAoB,GAAG,OAAO;AAAA,IAC7D,CAAC;AAAA,EA3DH;AA8DF;AAEO,MAAM,cA2BHC,WAAAA,UAyCV;AAAA;AAAA;AAAA;AAAA,EAIE,YACE,SAkBA;AACA,UAAM,OAAO;AAIf,SAAA,WAA+B,CAAC,SAAS;AACvC,aAAOT,kBAAS;AAAA,QACd,QAAQ,MAAM;AAAA,QACd,MAAM,KAAK;AAAA,QACX,mBAAmB,MAAM;AAAA,MAAA,CACnB;AAAA,IACV;AAEA,SAAA,kBAA6C,CAAC,SAAU;AACtD,aAAOA,kBAAS;AAAA,QACd,GAAG;AAAA,QACH,MAAM,KAAK;AAAA,QACX,QAAQ,CAAC,MAAO,MAAM,SAAS,KAAK,OAAO,EAAE,OAAO,IAAI,EAAE;AAAA,MAAA,CAC3D;AAAA,IACH;AAEA,SAAA,YAAiC,CAAC,SAAS;AAEzC,aAAOC,oBAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,YAAiC,CAAC,SAAS;AAEzC,aAAOC,oBAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,gBAAyC,CAAC,SAAS;AACjD,aAAOC,cAAAA,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAW;AAAA,IACxD;AAEA,SAAA,gBAAyC,CAAC,SAAS;AACjD,aAAOC,cAAAA,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAW;AAAA,IACxD;AAEA,SAAA,cAAc,MAAoC;AAChD,aAAOE,YAAAA,YAAY,EAAE,MAAM,KAAK,UAAU;AAAA,IAC5C;AAEA,SAAA,OAAsC,MAAM;AAAA,MAC1C,CAAC,OAAO,QAA+C;AACrD,8CAAQE,KAAAA,MAAA,EAAK,KAAU,MAAM,KAAK,UAAoB,GAAG,OAAO;AAAA,MAClE;AAAA,IAAA;AApDE,SAAa,WAAW,uBAAO,IAAI,YAAY;AAAA,EACnD;AAqDF;AAaO,SAAS,YAwBd,SAkCA;AACA,SAAO,IAAI;AAAA;AAAA,IAmBT;AAAA,EAAA;AAEJ;AAyBO,SAAS,6BAAwD;AACtE,SAAO,CAUL,YAWG;AACH,WAAO,gBAUL,OAAO;AAAA,EACX;AACF;AAKO,MAAM,uBAAuB;AAE7B,MAAM,kBAcHE,WAAAA,cA6BV;AAAA;AAAA;AAAA;AAAA,EAIE,YACE,SAYA;AACA,UAAM,OAAO;AAIf,SAAA,WAAuC,CAAC,SAAS;AAC/C,aAAOV,kBAAS;AAAA,QACd,QAAQ,MAAM;AAAA,QACd,MAAM,KAAK;AAAA,QACX,mBAAmB,MAAM;AAAA,MAAA,CACnB;AAAA,IACV;AAEA,SAAA,kBAAqD,CAAC,SAAS;AAC7D,aAAOA,kBAAS;AAAA,QACd,GAAG;AAAA,QACH,MAAM,KAAK;AAAA,QACX,QAAQ,CAAC,MAAO,MAAM,SAAS,KAAK,OAAO,EAAE,OAAO,IAAI,EAAE;AAAA,MAAA,CAC3D;AAAA,IACH;AAEA,SAAA,YAAyC,CAAC,SAAS;AAEjD,aAAOC,oBAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,YAAyC,CAAC,SAAS;AAEjD,aAAOC,oBAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,gBAAiD,CAAC,SAAS;AACzD,aAAOC,cAAAA,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAW;AAAA,IACxD;AAEA,SAAA,gBAAiD,CAAC,SAAS;AACzD,aAAOC,cAAAA,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAW;AAAA,IACxD;AAEA,SAAA,cAAc,MAA8B;AAC1C,aAAOE,YAAAA,YAAY,EAAE,MAAM,KAAK,UAAU;AAAA,IAC5C;AAEA,SAAA,OAAgC,MAAM;AAAA,MACpC,CAAC,OAAO,QAA+C;AACrD,8CAAQE,KAAAA,MAAA,EAAK,KAAU,MAAM,KAAK,UAAW,GAAG,OAAO;AAAA,MACzD;AAAA,IAAA;AApDE,SAAa,WAAW,uBAAO,IAAI,YAAY;AAAA,EACnD;AAqDF;AAYO,SAAS,gBAYd,SAyBA;AACA,SAAO,IAAI,UAaT,OAAO;AACX;AAEO,SAAS,gBAKd,MAGuB;AACvB,SAAO;AACT;AAmBO,MAAM,sBAYH,MAiBR;AAAA,EACA,YACE,SAyBA;AACA,UAAM;AAAA,MACJ,GAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,EACH;AACF;;;;;;;;;;;"}

package/dist/esm/RouterProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RouterProvider.js","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Matches } from './Matches'\nimport { getRouterContext } from './routerContext'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  RouterOptions,\n} from '@tanstack/router-core'\n\n/**\n * Low-level provider that places the router into React context and optionally\n * updates router options from props. Most apps should use `RouterProvider`.\n */\nexport function RouterContextProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({\n  router,\n  children,\n  ...rest\n}: RouterProps<TRouter, TDehydrated> & {\n  children: React.ReactNode\n}) {\n  if (Object.keys(rest).length > 0) {\n    // Allow the router to update options on the router instance\n    router.update({\n      ...router.options,\n      ...rest,\n      context: {\n        ...router.options.context,\n        ...rest.context,\n      },\n    } as any)\n  }\n\n  const routerContext = getRouterContext()\n\n  const provider = (\n    <routerContext.Provider value={router as AnyRouter}>\n      {children}\n    </routerContext.Provider>\n  )\n\n  if (router.options.Wrap) {\n    return <router.options.Wrap>{provider}</router.options.Wrap>\n  }\n\n  return provider\n}\n\n/**\n * Top-level component that renders the active route matches and provides the\n * router to the React tree via context.\n *\n * Accepts the same options as `createRouter` via props to update the router\n * instance after creation.\n *\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRouterFunction\n */\nexport function RouterProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({ router, ...rest }: RouterProps<TRouter, TDehydrated>) {\n  return (\n    <RouterContextProvider router={router} {...rest}>\n      <Matches />\n    </RouterContextProvider>\n  )\n}\n\nexport type RouterProps<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n> = Omit<\n  RouterOptions<\n    TRouter['routeTree'],\n    NonNullable<TRouter['options']['trailingSlash']>,\n    NonNullable<TRouter['options']['defaultStructuralSharing']>,\n    TRouter['history'],\n    TDehydrated\n  >,\n  'context'\n> & {\n  router: TRouter\n  context?: Partial<\n    RouterOptions<\n      TRouter['routeTree'],\n      NonNullable<TRouter['options']['trailingSlash']>,\n      NonNullable<TRouter['options']['defaultStructuralSharing']>,\n      TRouter['history'],\n      TDehydrated\n    >['context']\n  >\n}\n"],"names":[],"mappings":";;;AAaO,SAAS,sBAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AACD,MAAI,OAAO,KAAK,IAAI,EAAE,SAAS,GAAG;AAEhC,WAAO,OAAO;AAAA,MACZ,GAAG,OAAO;AAAA,MACV,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,OAAO,QAAQ;AAAA,QAClB,GAAG,KAAK;AAAA,MAAA;AAAA,IACV,CACM;AAAA,EACV;AAEA,QAAM,gBAAgB,iBAAA;AAEtB,QAAM,WACJ,oBAAC,cAAc,UAAd,EAAuB,OAAO,QAC5B,UACH;AAGF,MAAI,OAAO,QAAQ,MAAM;AACvB,WAAO,oBAAC,OAAO,QAAQ,MAAf,EAAqB,UAAA,UAAS;AAAA,EACxC;AAEA,SAAO;AACT;AAWO,SAAS,eAGd,EAAE,QAAQ,GAAG,QAA2C;AACxD,6BACG,uBAAA,EAAsB,QAAiB,GAAG,MACzC,UAAA,oBAAC,WAAQ,GACX;AAEJ;"}
+{"version":3,"file":"RouterProvider.js","sources":["../../src/RouterProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Matches } from './Matches'\nimport { getRouterContext } from './routerContext'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  RouterOptions,\n} from '@tanstack/router-core'\n\n/**\n * Low-level provider that places the router into React context and optionally\n * updates router options from props. Most apps should use `RouterProvider`.\n */\nexport function RouterContextProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({\n  router,\n  children,\n  ...rest\n}: RouterProps<TRouter, TDehydrated> & {\n  children: React.ReactNode\n}) {\n  if (Object.keys(rest).length > 0) {\n    // Allow the router to update options on the router instance\n    router.update({\n      ...router.options,\n      ...rest,\n      context: {\n        ...router.options.context,\n        ...rest.context,\n      },\n    })\n  }\n\n  const routerContext = getRouterContext()\n\n  const provider = (\n    <routerContext.Provider value={router as AnyRouter}>\n      {children}\n    </routerContext.Provider>\n  )\n\n  if (router.options.Wrap) {\n    return <router.options.Wrap>{provider}</router.options.Wrap>\n  }\n\n  return provider\n}\n\n/**\n * Top-level component that renders the active route matches and provides the\n * router to the React tree via context.\n *\n * Accepts the same options as `createRouter` via props to update the router\n * instance after creation.\n *\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRouterFunction\n */\nexport function RouterProvider<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n>({ router, ...rest }: RouterProps<TRouter, TDehydrated>) {\n  return (\n    <RouterContextProvider router={router} {...rest}>\n      <Matches />\n    </RouterContextProvider>\n  )\n}\n\nexport type RouterProps<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDehydrated extends Record<string, any> = Record<string, any>,\n> = Omit<\n  RouterOptions<\n    TRouter['routeTree'],\n    NonNullable<TRouter['options']['trailingSlash']>,\n    NonNullable<TRouter['options']['defaultStructuralSharing']>,\n    TRouter['history'],\n    TDehydrated\n  >,\n  'context'\n> & {\n  router: TRouter\n  context?: Partial<\n    RouterOptions<\n      TRouter['routeTree'],\n      NonNullable<TRouter['options']['trailingSlash']>,\n      NonNullable<TRouter['options']['defaultStructuralSharing']>,\n      TRouter['history'],\n      TDehydrated\n    >['context']\n  >\n}\n"],"names":[],"mappings":";;;AAaO,SAAS,sBAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AACD,MAAI,OAAO,KAAK,IAAI,EAAE,SAAS,GAAG;AAEhC,WAAO,OAAO;AAAA,MACZ,GAAG,OAAO;AAAA,MACV,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,OAAO,QAAQ;AAAA,QAClB,GAAG,KAAK;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EACH;AAEA,QAAM,gBAAgB,iBAAA;AAEtB,QAAM,WACJ,oBAAC,cAAc,UAAd,EAAuB,OAAO,QAC5B,UACH;AAGF,MAAI,OAAO,QAAQ,MAAM;AACvB,WAAO,oBAAC,OAAO,QAAQ,MAAf,EAAqB,UAAA,UAAS;AAAA,EACxC;AAEA,SAAO;AACT;AAWO,SAAS,eAGd,EAAE,QAAQ,GAAG,QAA2C;AACxD,6BACG,uBAAA,EAAsB,QAAiB,GAAG,MACzC,UAAA,oBAAC,WAAQ,GACX;AAEJ;"}

package/dist/esm/route.js.map

@@ -1 +1 @@
-{"version":3,"file":"route.js","sources":["../../src/route.tsx"],"sourcesContent":["import {\n  BaseRootRoute,\n  BaseRoute,\n  BaseRouteApi,\n  notFound,\n} from '@tanstack/router-core'\nimport React from 'react'\nimport { useLoaderData } from './useLoaderData'\nimport { useLoaderDeps } from './useLoaderDeps'\nimport { useParams } from './useParams'\nimport { useSearch } from './useSearch'\nimport { useNavigate } from './useNavigate'\nimport { useMatch } from './useMatch'\nimport { useRouter } from './useRouter'\nimport { Link } from './link'\nimport type {\n  AnyContext,\n  AnyRoute,\n  AnyRouter,\n  ConstrainLiteral,\n  ErrorComponentProps,\n  NotFoundError,\n  NotFoundRouteProps,\n  Register,\n  RegisteredRouter,\n  ResolveFullPath,\n  ResolveId,\n  ResolveParams,\n  RootRoute as RootRouteCore,\n  RootRouteId,\n  RootRouteOptions,\n  RouteConstraints,\n  Route as RouteCore,\n  RouteIds,\n  RouteMask,\n  RouteOptions,\n  RouteTypesById,\n  RouterCore,\n  ToMaskOptions,\n  UseNavigateResult,\n} from '@tanstack/router-core'\nimport type { UseLoaderDataRoute } from './useLoaderData'\nimport type { UseMatchRoute } from './useMatch'\nimport type { UseLoaderDepsRoute } from './useLoaderDeps'\nimport type { UseParamsRoute } from './useParams'\nimport type { UseSearchRoute } from './useSearch'\nimport type { UseRouteContextRoute } from './useRouteContext'\nimport type { LinkComponentRoute } from './link'\n\ndeclare module '@tanstack/router-core' {\n  export interface UpdatableRouteOptionsExtensions {\n    component?: RouteComponent\n    errorComponent?: false | null | undefined | ErrorRouteComponent\n    notFoundComponent?: NotFoundRouteComponent\n    pendingComponent?: RouteComponent\n  }\n\n  export interface RootRouteOptionsExtensions {\n    shellComponent?: ({\n      children,\n    }: {\n      children: React.ReactNode\n    }) => React.ReactNode\n  }\n\n  export interface RouteExtensions<\n    in out TId extends string,\n    in out TFullPath extends string,\n  > {\n    useMatch: UseMatchRoute<TId>\n    useRouteContext: UseRouteContextRoute<TId>\n    useSearch: UseSearchRoute<TId>\n    useParams: UseParamsRoute<TId>\n    useLoaderDeps: UseLoaderDepsRoute<TId>\n    useLoaderData: UseLoaderDataRoute<TId>\n    useNavigate: () => UseNavigateResult<TFullPath>\n    Link: LinkComponentRoute<TFullPath>\n  }\n}\n\n/**\n * Returns a route-specific API that exposes type-safe hooks pre-bound\n * to a single route ID. Useful for consuming a route's APIs from files\n * where the route object isn't directly imported (e.g. code-split files).\n *\n * @param id Route ID string literal for the target route.\n * @returns A `RouteApi` instance bound to the given route ID.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/getRouteApiFunction\n */\nexport function getRouteApi<\n  const TId,\n  TRouter extends AnyRouter = RegisteredRouter,\n>(id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>) {\n  return new RouteApi<TId, TRouter>({ id })\n}\n\nexport class RouteApi<\n  TId,\n  TRouter extends AnyRouter = RegisteredRouter,\n> extends BaseRouteApi<TId, TRouter> {\n  /**\n   * @deprecated Use the `getRouteApi` function instead.\n   */\n  constructor({ id }: { id: TId }) {\n    super({ id })\n  }\n\n  useMatch: UseMatchRoute<TId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<TId> = (opts) => {\n    return useMatch({\n      from: this.id as any,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id, strict: false } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id, strict: false } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<\n    RouteTypesById<TRouter, TId>['fullPath']\n  > => {\n    const router = useRouter()\n    return useNavigate({ from: router.routesById[this.id as string].fullPath })\n  }\n\n  notFound = (opts?: NotFoundError) => {\n    return notFound({ routeId: this.id as string, ...opts })\n  }\n\n  Link: LinkComponentRoute<RouteTypesById<TRouter, TId>['fullPath']> =\n    React.forwardRef((props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      const router = useRouter()\n      const fullPath = router.routesById[this.id as string].fullPath\n      return <Link ref={ref} from={fullPath as never} {...props} />\n    }) as unknown as LinkComponentRoute<\n      RouteTypesById<TRouter, TId>['fullPath']\n    >\n}\n\nexport class Route<\n  in out TRegister = unknown,\n  in out TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,\n  in out TPath extends RouteConstraints['TPath'] = '/',\n  in out TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<\n    TParentRoute,\n    TPath\n  >,\n  in out TCustomId extends RouteConstraints['TCustomId'] = string,\n  in out TId extends RouteConstraints['TId'] = ResolveId<\n    TParentRoute,\n    TCustomId,\n    TPath\n  >,\n  in out TSearchValidator = undefined,\n  in out TParams = ResolveParams<TPath>,\n  in out TRouterContext = AnyContext,\n  in out TRouteContextFn = AnyContext,\n  in out TBeforeLoadFn = AnyContext,\n  in out TLoaderDeps extends Record<string, any> = {},\n  in out TLoaderFn = undefined,\n  in out TChildren = unknown,\n  in out TFileRouteTypes = unknown,\n  in out TSSR = unknown,\n  in out TServerMiddlewares = unknown,\n  in out THandlers = undefined,\n>\n  extends BaseRoute<\n    TRegister,\n    TParentRoute,\n    TPath,\n    TFullPath,\n    TCustomId,\n    TId,\n    TSearchValidator,\n    TParams,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TFileRouteTypes,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >\n  implements\n    RouteCore<\n      TRegister,\n      TParentRoute,\n      TPath,\n      TFullPath,\n      TCustomId,\n      TId,\n      TSearchValidator,\n      TParams,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TChildren,\n      TFileRouteTypes,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >\n{\n  /**\n   * @deprecated Use the `createRoute` function instead.\n   */\n  constructor(\n    options?: RouteOptions<\n      TRegister,\n      TParentRoute,\n      TId,\n      TCustomId,\n      TFullPath,\n      TPath,\n      TSearchValidator,\n      TParams,\n      TLoaderDeps,\n      TLoaderFn,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >,\n  ) {\n    super(options)\n    ;(this as any).$$typeof = Symbol.for('react.memo')\n  }\n\n  useMatch: UseMatchRoute<TId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<TId> = (opts?) => {\n    return useMatch({\n      ...opts,\n      from: this.id,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<TFullPath> => {\n    return useNavigate({ from: this.fullPath })\n  }\n\n  Link: LinkComponentRoute<TFullPath> = React.forwardRef(\n    (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      return <Link ref={ref} from={this.fullPath as never} {...props} />\n    },\n  ) as unknown as LinkComponentRoute<TFullPath>\n}\n\n/**\n * Creates a non-root Route instance for code-based routing.\n *\n * Use this to define a route that will be composed into a route tree\n * (typically via a parent route's `addChildren`). If you're using file-based\n * routing, prefer `createFileRoute`.\n *\n * @param options Route options (path, component, loader, context, etc.).\n * @returns A Route instance to be attached to the route tree.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRouteFunction\n */\nexport function createRoute<\n  TRegister = unknown,\n  TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,\n  TPath extends RouteConstraints['TPath'] = '/',\n  TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<\n    TParentRoute,\n    TPath\n  >,\n  TCustomId extends RouteConstraints['TCustomId'] = string,\n  TId extends RouteConstraints['TId'] = ResolveId<\n    TParentRoute,\n    TCustomId,\n    TPath\n  >,\n  TSearchValidator = undefined,\n  TParams = ResolveParams<TPath>,\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TChildren = unknown,\n  TSSR = unknown,\n  const TServerMiddlewares = unknown,\n>(\n  options: RouteOptions<\n    TRegister,\n    TParentRoute,\n    TId,\n    TCustomId,\n    TFullPath,\n    TPath,\n    TSearchValidator,\n    TParams,\n    TLoaderDeps,\n    TLoaderFn,\n    AnyContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TSSR,\n    TServerMiddlewares\n  >,\n): Route<\n  TRegister,\n  TParentRoute,\n  TPath,\n  TFullPath,\n  TCustomId,\n  TId,\n  TSearchValidator,\n  TParams,\n  AnyContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  TChildren,\n  TSSR,\n  TServerMiddlewares\n> {\n  return new Route<\n    TRegister,\n    TParentRoute,\n    TPath,\n    TFullPath,\n    TCustomId,\n    TId,\n    TSearchValidator,\n    TParams,\n    AnyContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TSSR,\n    TServerMiddlewares\n  >(\n    // TODO: Help us TypeChris, you're our only hope!\n    options as any,\n  )\n}\n\nexport type AnyRootRoute = RootRoute<\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any\n>\n\n/**\n * Creates a root route factory that requires a router context type.\n *\n * Use when your root route expects `context` to be provided to `createRouter`.\n * The returned function behaves like `createRootRoute` but enforces a context type.\n *\n * @returns A factory function to configure and return a root route.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRootRouteWithContextFunction\n */\nexport function createRootRouteWithContext<TRouterContext extends {}>() {\n  return <\n    TRegister = Register,\n    TRouteContextFn = AnyContext,\n    TBeforeLoadFn = AnyContext,\n    TSearchValidator = undefined,\n    TLoaderDeps extends Record<string, any> = {},\n    TLoaderFn = undefined,\n    TSSR = unknown,\n    TServerMiddlewares = unknown,\n  >(\n    options?: RootRouteOptions<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares\n    >,\n  ) => {\n    return createRootRoute<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares\n    >(options as any)\n  }\n}\n\n/**\n * @deprecated Use the `createRootRouteWithContext` function instead.\n */\nexport const rootRouteWithContext = createRootRouteWithContext\n\nexport class RootRoute<\n  in out TRegister = unknown,\n  in out TSearchValidator = undefined,\n  in out TRouterContext = {},\n  in out TRouteContextFn = AnyContext,\n  in out TBeforeLoadFn = AnyContext,\n  in out TLoaderDeps extends Record<string, any> = {},\n  in out TLoaderFn = undefined,\n  in out TChildren = unknown,\n  in out TFileRouteTypes = unknown,\n  in out TSSR = unknown,\n  in out TServerMiddlewares = unknown,\n  in out THandlers = undefined,\n>\n  extends BaseRootRoute<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TFileRouteTypes,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >\n  implements\n    RootRouteCore<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TChildren,\n      TFileRouteTypes,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >\n{\n  /**\n   * @deprecated `RootRoute` is now an internal implementation detail. Use `createRootRoute()` instead.\n   */\n  constructor(\n    options?: RootRouteOptions<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >,\n  ) {\n    super(options)\n    ;(this as any).$$typeof = Symbol.for('react.memo')\n  }\n\n  useMatch: UseMatchRoute<RootRouteId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<RootRouteId> = (opts) => {\n    return useMatch({\n      ...opts,\n      from: this.id,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<RootRouteId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<RootRouteId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<RootRouteId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<RootRouteId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<'/'> => {\n    return useNavigate({ from: this.fullPath })\n  }\n\n  Link: LinkComponentRoute<'/'> = React.forwardRef(\n    (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      return <Link ref={ref} from={this.fullPath} {...props} />\n    },\n  ) as unknown as LinkComponentRoute<'/'>\n}\n\n/**\n * Creates a root Route instance used to build your route tree.\n *\n * Typically paired with `createRouter({ routeTree })`. If you need to require\n * a typed router context, use `createRootRouteWithContext` instead.\n *\n * @param options Root route options (component, error, pending, etc.).\n * @returns A root route instance.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRootRouteFunction\n */\nexport function createRootRoute<\n  TRegister = Register,\n  TSearchValidator = undefined,\n  TRouterContext = {},\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TSSR = unknown,\n  const TServerMiddlewares = unknown,\n  THandlers = undefined,\n>(\n  options?: RootRouteOptions<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >,\n): RootRoute<\n  TRegister,\n  TSearchValidator,\n  TRouterContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  unknown,\n  unknown,\n  TSSR,\n  TServerMiddlewares,\n  THandlers\n> {\n  return new RootRoute<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    unknown,\n    unknown,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >(options)\n}\n\nexport function createRouteMask<\n  TRouteTree extends AnyRoute,\n  TFrom extends string,\n  TTo extends string,\n>(\n  opts: {\n    routeTree: TRouteTree\n  } & ToMaskOptions<RouterCore<TRouteTree, 'never', boolean>, TFrom, TTo>,\n): RouteMask<TRouteTree> {\n  return opts as any\n}\n\nexport interface DefaultRouteTypes<TProps> {\n  component:\n    | ((props: TProps) => any)\n    | React.LazyExoticComponent<(props: TProps) => any>\n}\nexport interface RouteTypes<TProps> extends DefaultRouteTypes<TProps> {}\n\nexport type AsyncRouteComponent<TProps> = RouteTypes<TProps>['component'] & {\n  preload?: () => Promise<void>\n}\n\nexport type RouteComponent = AsyncRouteComponent<{}>\n\nexport type ErrorRouteComponent = AsyncRouteComponent<ErrorComponentProps>\n\nexport type NotFoundRouteComponent = RouteTypes<NotFoundRouteProps>['component']\n\nexport class NotFoundRoute<\n  TRegister,\n  TParentRoute extends AnyRootRoute,\n  TRouterContext = AnyContext,\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TSearchValidator = undefined,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TChildren = unknown,\n  TSSR = unknown,\n  TServerMiddlewares = unknown,\n> extends Route<\n  TRegister,\n  TParentRoute,\n  '/404',\n  '/404',\n  '404',\n  '404',\n  TSearchValidator,\n  {},\n  TRouterContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  TChildren,\n  TSSR,\n  TServerMiddlewares\n> {\n  constructor(\n    options: Omit<\n      RouteOptions<\n        TRegister,\n        TParentRoute,\n        string,\n        string,\n        string,\n        string,\n        TSearchValidator,\n        {},\n        TLoaderDeps,\n        TLoaderFn,\n        TRouterContext,\n        TRouteContextFn,\n        TBeforeLoadFn,\n        TSSR,\n        TServerMiddlewares\n      >,\n      | 'caseSensitive'\n      | 'parseParams'\n      | 'stringifyParams'\n      | 'path'\n      | 'id'\n      | 'params'\n    >,\n  ) {\n    super({\n      ...(options as any),\n      id: '404',\n    })\n  }\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;AAyFO,SAAS,YAGd,IAA2D;AAC3D,SAAO,IAAI,SAAuB,EAAE,IAAI;AAC1C;AAEO,MAAM,iBAGH,aAA2B;AAAA;AAAA;AAAA;AAAA,EAInC,YAAY,EAAE,MAAmB;AAC/B,UAAM,EAAE,IAAI;AAGd,SAAA,WAA+B,CAAC,SAAS;AACvC,aAAO,SAAS;AAAA,QACd,QAAQ,MAAM;AAAA,QACd,MAAM,KAAK;AAAA,QACX,mBAAmB,MAAM;AAAA,MAAA,CACnB;AAAA,IACV;AAEA,SAAA,kBAA6C,CAAC,SAAS;AACrD,aAAO,SAAS;AAAA,QACd,MAAM,KAAK;AAAA,QACX,QAAQ,CAAC,MAAO,MAAM,SAAS,KAAK,OAAO,EAAE,OAAO,IAAI,EAAE;AAAA,MAAA,CAC3D;AAAA,IACH;AAEA,SAAA,YAAiC,CAAC,SAAS;AAEzC,aAAO,UAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,YAAiC,CAAC,SAAS;AAEzC,aAAO,UAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,gBAAyC,CAAC,SAAS;AACjD,aAAO,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAI,QAAQ,OAAc;AAAA,IACvE;AAEA,SAAA,gBAAyC,CAAC,SAAS;AACjD,aAAO,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAI,QAAQ,OAAc;AAAA,IACvE;AAEA,SAAA,cAAc,MAET;AACH,YAAM,SAAS,UAAA;AACf,aAAO,YAAY,EAAE,MAAM,OAAO,WAAW,KAAK,EAAY,EAAE,UAAU;AAAA,IAC5E;AAEA,SAAA,WAAW,CAAC,SAAyB;AACnC,aAAO,SAAS,EAAE,SAAS,KAAK,IAAc,GAAG,MAAM;AAAA,IACzD;AAEA,SAAA,OACEA,eAAM,WAAW,CAAC,OAAO,QAA+C;AACtE,YAAM,SAAS,UAAA;AACf,YAAM,WAAW,OAAO,WAAW,KAAK,EAAY,EAAE;AACtD,iCAAQ,MAAA,EAAK,KAAU,MAAM,UAAoB,GAAG,OAAO;AAAA,IAC7D,CAAC;AAAA,EA3DH;AA8DF;AAEO,MAAM,cA2BH,UAyCV;AAAA;AAAA;AAAA;AAAA,EAIE,YACE,SAkBA;AACA,UAAM,OAAO;AAIf,SAAA,WAA+B,CAAC,SAAS;AACvC,aAAO,SAAS;AAAA,QACd,QAAQ,MAAM;AAAA,QACd,MAAM,KAAK;AAAA,QACX,mBAAmB,MAAM;AAAA,MAAA,CACnB;AAAA,IACV;AAEA,SAAA,kBAA6C,CAAC,SAAU;AACtD,aAAO,SAAS;AAAA,QACd,GAAG;AAAA,QACH,MAAM,KAAK;AAAA,QACX,QAAQ,CAAC,MAAO,MAAM,SAAS,KAAK,OAAO,EAAE,OAAO,IAAI,EAAE;AAAA,MAAA,CAC3D;AAAA,IACH;AAEA,SAAA,YAAiC,CAAC,SAAS;AAEzC,aAAO,UAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,YAAiC,CAAC,SAAS;AAEzC,aAAO,UAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,gBAAyC,CAAC,SAAS;AACjD,aAAO,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAW;AAAA,IACxD;AAEA,SAAA,gBAAyC,CAAC,SAAS;AACjD,aAAO,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAW;AAAA,IACxD;AAEA,SAAA,cAAc,MAAoC;AAChD,aAAO,YAAY,EAAE,MAAM,KAAK,UAAU;AAAA,IAC5C;AAEA,SAAA,OAAsCA,eAAM;AAAA,MAC1C,CAAC,OAAO,QAA+C;AACrD,mCAAQ,MAAA,EAAK,KAAU,MAAM,KAAK,UAAoB,GAAG,OAAO;AAAA,MAClE;AAAA,IAAA;AApDE,SAAa,WAAW,uBAAO,IAAI,YAAY;AAAA,EACnD;AAqDF;AAaO,SAAS,YAwBd,SAkCA;AACA,SAAO,IAAI;AAAA;AAAA,IAmBT;AAAA,EAAA;AAEJ;AAyBO,SAAS,6BAAwD;AACtE,SAAO,CAUL,YAWG;AACH,WAAO,gBAUL,OAAc;AAAA,EAClB;AACF;AAKO,MAAM,uBAAuB;AAE7B,MAAM,kBAcH,cA6BV;AAAA;AAAA;AAAA;AAAA,EAIE,YACE,SAYA;AACA,UAAM,OAAO;AAIf,SAAA,WAAuC,CAAC,SAAS;AAC/C,aAAO,SAAS;AAAA,QACd,QAAQ,MAAM;AAAA,QACd,MAAM,KAAK;AAAA,QACX,mBAAmB,MAAM;AAAA,MAAA,CACnB;AAAA,IACV;AAEA,SAAA,kBAAqD,CAAC,SAAS;AAC7D,aAAO,SAAS;AAAA,QACd,GAAG;AAAA,QACH,MAAM,KAAK;AAAA,QACX,QAAQ,CAAC,MAAO,MAAM,SAAS,KAAK,OAAO,EAAE,OAAO,IAAI,EAAE;AAAA,MAAA,CAC3D;AAAA,IACH;AAEA,SAAA,YAAyC,CAAC,SAAS;AAEjD,aAAO,UAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,YAAyC,CAAC,SAAS;AAEjD,aAAO,UAAU;AAAA,QACf,QAAQ,MAAM;AAAA,QACd,mBAAmB,MAAM;AAAA,QACzB,MAAM,KAAK;AAAA,MAAA,CACL;AAAA,IACV;AAEA,SAAA,gBAAiD,CAAC,SAAS;AACzD,aAAO,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAW;AAAA,IACxD;AAEA,SAAA,gBAAiD,CAAC,SAAS;AACzD,aAAO,cAAc,EAAE,GAAG,MAAM,MAAM,KAAK,IAAW;AAAA,IACxD;AAEA,SAAA,cAAc,MAA8B;AAC1C,aAAO,YAAY,EAAE,MAAM,KAAK,UAAU;AAAA,IAC5C;AAEA,SAAA,OAAgCA,eAAM;AAAA,MACpC,CAAC,OAAO,QAA+C;AACrD,mCAAQ,MAAA,EAAK,KAAU,MAAM,KAAK,UAAW,GAAG,OAAO;AAAA,MACzD;AAAA,IAAA;AApDE,SAAa,WAAW,uBAAO,IAAI,YAAY;AAAA,EACnD;AAqDF;AAYO,SAAS,gBAYd,SAyBA;AACA,SAAO,IAAI,UAaT,OAAO;AACX;AAEO,SAAS,gBAKd,MAGuB;AACvB,SAAO;AACT;AAmBO,MAAM,sBAYH,MAiBR;AAAA,EACA,YACE,SAyBA;AACA,UAAM;AAAA,MACJ,GAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,EACH;AACF;"}
+{"version":3,"file":"route.js","sources":["../../src/route.tsx"],"sourcesContent":["import {\n  BaseRootRoute,\n  BaseRoute,\n  BaseRouteApi,\n  notFound,\n} from '@tanstack/router-core'\nimport React from 'react'\nimport { useLoaderData } from './useLoaderData'\nimport { useLoaderDeps } from './useLoaderDeps'\nimport { useParams } from './useParams'\nimport { useSearch } from './useSearch'\nimport { useNavigate } from './useNavigate'\nimport { useMatch } from './useMatch'\nimport { useRouter } from './useRouter'\nimport { Link } from './link'\nimport type {\n  AnyContext,\n  AnyRoute,\n  AnyRouter,\n  ConstrainLiteral,\n  ErrorComponentProps,\n  NotFoundError,\n  NotFoundRouteProps,\n  Register,\n  RegisteredRouter,\n  ResolveFullPath,\n  ResolveId,\n  ResolveParams,\n  RootRoute as RootRouteCore,\n  RootRouteId,\n  RootRouteOptions,\n  RouteConstraints,\n  Route as RouteCore,\n  RouteIds,\n  RouteMask,\n  RouteOptions,\n  RouteTypesById,\n  RouterCore,\n  ToMaskOptions,\n  UseNavigateResult,\n} from '@tanstack/router-core'\nimport type { UseLoaderDataRoute } from './useLoaderData'\nimport type { UseMatchRoute } from './useMatch'\nimport type { UseLoaderDepsRoute } from './useLoaderDeps'\nimport type { UseParamsRoute } from './useParams'\nimport type { UseSearchRoute } from './useSearch'\nimport type { UseRouteContextRoute } from './useRouteContext'\nimport type { LinkComponentRoute } from './link'\n\ndeclare module '@tanstack/router-core' {\n  export interface UpdatableRouteOptionsExtensions {\n    component?: RouteComponent\n    errorComponent?: false | null | undefined | ErrorRouteComponent\n    notFoundComponent?: NotFoundRouteComponent\n    pendingComponent?: RouteComponent\n  }\n\n  export interface RootRouteOptionsExtensions {\n    shellComponent?: ({\n      children,\n    }: {\n      children: React.ReactNode\n    }) => React.ReactNode\n  }\n\n  export interface RouteExtensions<\n    in out TId extends string,\n    in out TFullPath extends string,\n  > {\n    useMatch: UseMatchRoute<TId>\n    useRouteContext: UseRouteContextRoute<TId>\n    useSearch: UseSearchRoute<TId>\n    useParams: UseParamsRoute<TId>\n    useLoaderDeps: UseLoaderDepsRoute<TId>\n    useLoaderData: UseLoaderDataRoute<TId>\n    useNavigate: () => UseNavigateResult<TFullPath>\n    Link: LinkComponentRoute<TFullPath>\n  }\n}\n\n/**\n * Returns a route-specific API that exposes type-safe hooks pre-bound\n * to a single route ID. Useful for consuming a route's APIs from files\n * where the route object isn't directly imported (e.g. code-split files).\n *\n * @param id Route ID string literal for the target route.\n * @returns A `RouteApi` instance bound to the given route ID.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/getRouteApiFunction\n */\nexport function getRouteApi<\n  const TId,\n  TRouter extends AnyRouter = RegisteredRouter,\n>(id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>) {\n  return new RouteApi<TId, TRouter>({ id })\n}\n\nexport class RouteApi<\n  TId,\n  TRouter extends AnyRouter = RegisteredRouter,\n> extends BaseRouteApi<TId, TRouter> {\n  /**\n   * @deprecated Use the `getRouteApi` function instead.\n   */\n  constructor({ id }: { id: TId }) {\n    super({ id })\n  }\n\n  useMatch: UseMatchRoute<TId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<TId> = (opts) => {\n    return useMatch({\n      from: this.id as any,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id, strict: false } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id, strict: false } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<\n    RouteTypesById<TRouter, TId>['fullPath']\n  > => {\n    const router = useRouter()\n    return useNavigate({ from: router.routesById[this.id as string].fullPath })\n  }\n\n  notFound = (opts?: NotFoundError) => {\n    return notFound({ routeId: this.id as string, ...opts })\n  }\n\n  Link: LinkComponentRoute<RouteTypesById<TRouter, TId>['fullPath']> =\n    React.forwardRef((props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      const router = useRouter()\n      const fullPath = router.routesById[this.id as string].fullPath\n      return <Link ref={ref} from={fullPath as never} {...props} />\n    }) as unknown as LinkComponentRoute<\n      RouteTypesById<TRouter, TId>['fullPath']\n    >\n}\n\nexport class Route<\n  in out TRegister = unknown,\n  in out TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,\n  in out TPath extends RouteConstraints['TPath'] = '/',\n  in out TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<\n    TParentRoute,\n    TPath\n  >,\n  in out TCustomId extends RouteConstraints['TCustomId'] = string,\n  in out TId extends RouteConstraints['TId'] = ResolveId<\n    TParentRoute,\n    TCustomId,\n    TPath\n  >,\n  in out TSearchValidator = undefined,\n  in out TParams = ResolveParams<TPath>,\n  in out TRouterContext = AnyContext,\n  in out TRouteContextFn = AnyContext,\n  in out TBeforeLoadFn = AnyContext,\n  in out TLoaderDeps extends Record<string, any> = {},\n  in out TLoaderFn = undefined,\n  in out TChildren = unknown,\n  in out TFileRouteTypes = unknown,\n  in out TSSR = unknown,\n  in out TServerMiddlewares = unknown,\n  in out THandlers = undefined,\n>\n  extends BaseRoute<\n    TRegister,\n    TParentRoute,\n    TPath,\n    TFullPath,\n    TCustomId,\n    TId,\n    TSearchValidator,\n    TParams,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TFileRouteTypes,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >\n  implements\n    RouteCore<\n      TRegister,\n      TParentRoute,\n      TPath,\n      TFullPath,\n      TCustomId,\n      TId,\n      TSearchValidator,\n      TParams,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TChildren,\n      TFileRouteTypes,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >\n{\n  /**\n   * @deprecated Use the `createRoute` function instead.\n   */\n  constructor(\n    options?: RouteOptions<\n      TRegister,\n      TParentRoute,\n      TId,\n      TCustomId,\n      TFullPath,\n      TPath,\n      TSearchValidator,\n      TParams,\n      TLoaderDeps,\n      TLoaderFn,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >,\n  ) {\n    super(options)\n    ;(this as any).$$typeof = Symbol.for('react.memo')\n  }\n\n  useMatch: UseMatchRoute<TId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<TId> = (opts?) => {\n    return useMatch({\n      ...opts,\n      from: this.id,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<TId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<TFullPath> => {\n    return useNavigate({ from: this.fullPath })\n  }\n\n  Link: LinkComponentRoute<TFullPath> = React.forwardRef(\n    (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      return <Link ref={ref} from={this.fullPath as never} {...props} />\n    },\n  ) as unknown as LinkComponentRoute<TFullPath>\n}\n\n/**\n * Creates a non-root Route instance for code-based routing.\n *\n * Use this to define a route that will be composed into a route tree\n * (typically via a parent route's `addChildren`). If you're using file-based\n * routing, prefer `createFileRoute`.\n *\n * @param options Route options (path, component, loader, context, etc.).\n * @returns A Route instance to be attached to the route tree.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRouteFunction\n */\nexport function createRoute<\n  TRegister = unknown,\n  TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,\n  TPath extends RouteConstraints['TPath'] = '/',\n  TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<\n    TParentRoute,\n    TPath\n  >,\n  TCustomId extends RouteConstraints['TCustomId'] = string,\n  TId extends RouteConstraints['TId'] = ResolveId<\n    TParentRoute,\n    TCustomId,\n    TPath\n  >,\n  TSearchValidator = undefined,\n  TParams = ResolveParams<TPath>,\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TChildren = unknown,\n  TSSR = unknown,\n  const TServerMiddlewares = unknown,\n>(\n  options: RouteOptions<\n    TRegister,\n    TParentRoute,\n    TId,\n    TCustomId,\n    TFullPath,\n    TPath,\n    TSearchValidator,\n    TParams,\n    TLoaderDeps,\n    TLoaderFn,\n    AnyContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TSSR,\n    TServerMiddlewares\n  >,\n): Route<\n  TRegister,\n  TParentRoute,\n  TPath,\n  TFullPath,\n  TCustomId,\n  TId,\n  TSearchValidator,\n  TParams,\n  AnyContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  TChildren,\n  TSSR,\n  TServerMiddlewares\n> {\n  return new Route<\n    TRegister,\n    TParentRoute,\n    TPath,\n    TFullPath,\n    TCustomId,\n    TId,\n    TSearchValidator,\n    TParams,\n    AnyContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TSSR,\n    TServerMiddlewares\n  >(\n    // TODO: Help us TypeChris, you're our only hope!\n    options as any,\n  )\n}\n\nexport type AnyRootRoute = RootRoute<\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any,\n  any\n>\n\n/**\n * Creates a root route factory that requires a router context type.\n *\n * Use when your root route expects `context` to be provided to `createRouter`.\n * The returned function behaves like `createRootRoute` but enforces a context type.\n *\n * @returns A factory function to configure and return a root route.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRootRouteWithContextFunction\n */\nexport function createRootRouteWithContext<TRouterContext extends {}>() {\n  return <\n    TRegister = Register,\n    TRouteContextFn = AnyContext,\n    TBeforeLoadFn = AnyContext,\n    TSearchValidator = undefined,\n    TLoaderDeps extends Record<string, any> = {},\n    TLoaderFn = undefined,\n    TSSR = unknown,\n    TServerMiddlewares = unknown,\n  >(\n    options?: RootRouteOptions<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares\n    >,\n  ) => {\n    return createRootRoute<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares\n    >(options)\n  }\n}\n\n/**\n * @deprecated Use the `createRootRouteWithContext` function instead.\n */\nexport const rootRouteWithContext = createRootRouteWithContext\n\nexport class RootRoute<\n  in out TRegister = unknown,\n  in out TSearchValidator = undefined,\n  in out TRouterContext = {},\n  in out TRouteContextFn = AnyContext,\n  in out TBeforeLoadFn = AnyContext,\n  in out TLoaderDeps extends Record<string, any> = {},\n  in out TLoaderFn = undefined,\n  in out TChildren = unknown,\n  in out TFileRouteTypes = unknown,\n  in out TSSR = unknown,\n  in out TServerMiddlewares = unknown,\n  in out THandlers = undefined,\n>\n  extends BaseRootRoute<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TChildren,\n    TFileRouteTypes,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >\n  implements\n    RootRouteCore<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TChildren,\n      TFileRouteTypes,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >\n{\n  /**\n   * @deprecated `RootRoute` is now an internal implementation detail. Use `createRootRoute()` instead.\n   */\n  constructor(\n    options?: RootRouteOptions<\n      TRegister,\n      TSearchValidator,\n      TRouterContext,\n      TRouteContextFn,\n      TBeforeLoadFn,\n      TLoaderDeps,\n      TLoaderFn,\n      TSSR,\n      TServerMiddlewares,\n      THandlers\n    >,\n  ) {\n    super(options)\n    ;(this as any).$$typeof = Symbol.for('react.memo')\n  }\n\n  useMatch: UseMatchRoute<RootRouteId> = (opts) => {\n    return useMatch({\n      select: opts?.select,\n      from: this.id,\n      structuralSharing: opts?.structuralSharing,\n    } as any) as any\n  }\n\n  useRouteContext: UseRouteContextRoute<RootRouteId> = (opts) => {\n    return useMatch({\n      ...opts,\n      from: this.id,\n      select: (d) => (opts?.select ? opts.select(d.context) : d.context),\n    }) as any\n  }\n\n  useSearch: UseSearchRoute<RootRouteId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useSearch({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useParams: UseParamsRoute<RootRouteId> = (opts) => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return useParams({\n      select: opts?.select,\n      structuralSharing: opts?.structuralSharing,\n      from: this.id,\n    } as any) as any\n  }\n\n  useLoaderDeps: UseLoaderDepsRoute<RootRouteId> = (opts) => {\n    return useLoaderDeps({ ...opts, from: this.id } as any)\n  }\n\n  useLoaderData: UseLoaderDataRoute<RootRouteId> = (opts) => {\n    return useLoaderData({ ...opts, from: this.id } as any)\n  }\n\n  useNavigate = (): UseNavigateResult<'/'> => {\n    return useNavigate({ from: this.fullPath })\n  }\n\n  Link: LinkComponentRoute<'/'> = React.forwardRef(\n    (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n      return <Link ref={ref} from={this.fullPath} {...props} />\n    },\n  ) as unknown as LinkComponentRoute<'/'>\n}\n\n/**\n * Creates a root Route instance used to build your route tree.\n *\n * Typically paired with `createRouter({ routeTree })`. If you need to require\n * a typed router context, use `createRootRouteWithContext` instead.\n *\n * @param options Root route options (component, error, pending, etc.).\n * @returns A root route instance.\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRootRouteFunction\n */\nexport function createRootRoute<\n  TRegister = Register,\n  TSearchValidator = undefined,\n  TRouterContext = {},\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TSSR = unknown,\n  const TServerMiddlewares = unknown,\n  THandlers = undefined,\n>(\n  options?: RootRouteOptions<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >,\n): RootRoute<\n  TRegister,\n  TSearchValidator,\n  TRouterContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  unknown,\n  unknown,\n  TSSR,\n  TServerMiddlewares,\n  THandlers\n> {\n  return new RootRoute<\n    TRegister,\n    TSearchValidator,\n    TRouterContext,\n    TRouteContextFn,\n    TBeforeLoadFn,\n    TLoaderDeps,\n    TLoaderFn,\n    unknown,\n    unknown,\n    TSSR,\n    TServerMiddlewares,\n    THandlers\n  >(options)\n}\n\nexport function createRouteMask<\n  TRouteTree extends AnyRoute,\n  TFrom extends string,\n  TTo extends string,\n>(\n  opts: {\n    routeTree: TRouteTree\n  } & ToMaskOptions<RouterCore<TRouteTree, 'never', boolean>, TFrom, TTo>,\n): RouteMask<TRouteTree> {\n  return opts as any\n}\n\nexport interface DefaultRouteTypes<TProps> {\n  component:\n    | ((props: TProps) => any)\n    | React.LazyExoticComponent<(props: TProps) => any>\n}\nexport interface RouteTypes<TProps> extends DefaultRouteTypes<TProps> {}\n\nexport type AsyncRouteComponent<TProps> = RouteTypes<TProps>['component'] & {\n  preload?: () => Promise<void>\n}\n\nexport type RouteComponent = AsyncRouteComponent<{}>\n\nexport type ErrorRouteComponent = AsyncRouteComponent<ErrorComponentProps>\n\nexport type NotFoundRouteComponent = RouteTypes<NotFoundRouteProps>['component']\n\nexport class NotFoundRoute<\n  TRegister,\n  TParentRoute extends AnyRootRoute,\n  TRouterContext = AnyContext,\n  TRouteContextFn = AnyContext,\n  TBeforeLoadFn = AnyContext,\n  TSearchValidator = undefined,\n  TLoaderDeps extends Record<string, any> = {},\n  TLoaderFn = undefined,\n  TChildren = unknown,\n  TSSR = unknown,\n  TServerMiddlewares = unknown,\n> extends Route<\n  TRegister,\n  TParentRoute,\n  '/404',\n  '/404',\n  '404',\n  '404',\n  TSearchValidator,\n  {},\n  TRouterContext,\n  TRouteContextFn,\n  TBeforeLoadFn,\n  TLoaderDeps,\n  TLoaderFn,\n  TChildren,\n  TSSR,\n  TServerMiddlewares\n> {\n  constructor(\n    options: Omit<\n      RouteOptions<\n        TRegister,\n        TParentRoute,\n        string,\n        string,\n        string,\n        string,\n        TSearchValidator,\n        {},\n        TLoaderDeps,\n        TLoaderFn,\n        TRouterContext,\n        TRouteContextFn,\n        TBeforeLoadFn,\n        TSSR,\n        TServerMiddlewares\n      >,\n      | 'caseSensitive'\n      | 'parseParams'\n      | 'stringifyParams'\n      | 'path'\n      | 'id'\n      | 'params'\n    >,\n  ) {\n    super({\n      ...(options as any),\n      id: '404',\n    })\n  }\n}\n"],"names":["React"],"mappings":"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"}

package/dist/llms/rules/installation.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "# Manual Setup\n\nTo set up TanStack Router manually in a React project, follow the steps below. This gives you a bare minimum setup to get going with TanStack Router using both file-based route generation and code-based route configuration:\n\n## Using File-Based Route Generation\n\n#### Install TanStack Router, Vite Plugin, and the Router Devtools\n\nInstall the necessary core dependencies:\n\n<!-- ::start:tabs variant=\"package-managers\" -->\n\nreact: @tanstack/react-router @tanstack/react-router-devtools\nsolid: @tanstack/solid-router @tanstack/solid-router-devtools\n\n<!-- ::end:tabs -->\n\nInstall the necessary development dependencies:\n\n<!-- ::start:tabs variant=\"package-managers\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-plugin\nsolid: @tanstack/router-plugin\n\n<!-- ::end:tabs -->\n\n#### Configure the Vite Plugin\n\n```tsx\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'\n    tanstackRouter({\n      target: 'react',\n      autoCodeSplitting: true,\n    }),\n    react(),\n    // ...,\n  ],\n})\n```\n\n> [!TIP]\n> If you are not using Vite, or any of the supported bundlers, you can check out the [TanStack Router CLI](./with-router-cli) guide for more info.\n\nCreate the following files:\n\n- `src/routes/__root.tsx` (with two '`_`' characters)\n- `src/routes/index.tsx`\n- `src/routes/about.tsx`\n- `src/main.tsx`\n\n<!-- ::start:framework -->\n\n# React\n\n<!-- ::start:tabs variant=\"files\" -->\n\n```tsx title=\"src/routes/__root.tsx\"\nimport { createRootRoute, Link, Outlet } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nconst RootLayout = () => (\n  <>\n    <div className=\"p-2 flex gap-2\">\n      <Link to=\"/\" className=\"[&.active]:font-bold\">\n        Home\n      </Link>{' '}\n      <Link to=\"/about\" className=\"[&.active]:font-bold\">\n        About\n      </Link>\n    </div>\n    <hr />\n    <Outlet />\n    <TanStackRouterDevtools />\n  </>\n)\n\nexport const Route = createRootRoute({ component: RootLayout })\n```\n\n```tsx title=\"src/routes/index.tsx\"\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/')({\n  component: Index,\n})\n\nfunction Index() {\n  return (\n    <div className=\"p-2\">\n      <h3>Welcome Home!</h3>\n    </div>\n  )\n}\n```\n\n```tsx title=\"src/routes/about.tsx\"\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/about')({\n  component: About,\n})\n\nfunction About() {\n  return <div className=\"p-2\">Hello from About!</div>\n}\n```\n\n```tsx title=\"src/main.tsx\"\nimport { StrictMode } from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nconst router = createRouter({ routeTree })\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\n// Render the app\nconst rootElement = document.getElementById('root')!\nif (!rootElement.innerHTML) {\n  const root = ReactDOM.createRoot(rootElement)\n  root.render(\n    <StrictMode>\n      <RouterProvider router={router} />\n    </StrictMode>,\n  )\n}\n```\n\n<!-- ::end:tabs -->\n\n# Solid\n\n<!-- ::start:tabs variant=\"files\" -->\n\n```tsx title=\"src/routes/__root.tsx\"\nimport { createRootRoute, Link, Outlet } from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nconst RootLayout = () => (\n  <>\n    <div class=\"p-2 flex gap-2\">\n      <Link to=\"/\" class=\"[&.active]:font-bold\">\n        Home\n      </Link>{' '}\n      <Link to=\"/about\" class=\"[&.active]:font-bold\">\n        About\n      </Link>\n    </div>\n    <hr />\n    <Outlet />\n    <TanStackRouterDevtools />\n  </>\n)\n\nexport const Route = createRootRoute({ component: RootLayout })\n```\n\n```tsx title=\"src/routes/index.tsx\"\nimport { createFileRoute } from '@tanstack/solid-router'\n\nexport const Route = createFileRoute('/')({\n  component: Index,\n})\n\nfunction Index() {\n  return (\n    <div class=\"p-2\">\n      <h3>Welcome Home!</h3>\n    </div>\n  )\n}\n```\n\n```tsx title=\"src/routes/about.tsx\"\nimport { createFileRoute } from '@tanstack/solid-router'\n\nexport const Route = createFileRoute('/about')({\n  component: About,\n})\n\nfunction About() {\n  return <div class=\"p-2\">Hello from About!</div>\n}\n```\n\n```tsx title=\"src/main.tsx\"\n/* @refresh reload */\nimport { render } from 'solid-js/web'\nimport { RouterProvider, createRouter } from '@tanstack/solid-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nconst router = createRouter({ routeTree })\n\n// Register the router instance for type safety\ndeclare module '@tanstack/solid-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\n// Render the app\nconst rootElement = document.getElementById('root')!\n\nrender(() => <RouterProvider router={router} />, rootElement)\n```\n\n<!-- ::end:tabs -->\n\n<!-- ::end:framework -->\n\nRegardless of whether you are using the `@tanstack/router-plugin` package and running the `npm run dev`/`npm run build` scripts, or manually running the `tsr watch`/`tsr generate` commands from your package scripts, the route tree file will be generated at `src/routeTree.gen.ts`.\n\nIf you are working with this pattern you should change the `id` of the root `<div>` on your `index.html` file to `<div id='root'></div>`\n\n## Using Code-Based Route Configuration\n\n> [!IMPORTANT]\n> The following example shows how to configure routes using code, and for simplicity's sake is in a single file for this demo. While code-based generation allows you to declare many routes and even the router instance in a single file, we recommend splitting your routes into separate files for better organization and performance as your application grows.\n\n<!-- ::start:framework -->\n\n# React\n\n```tsx\nimport { StrictMode } from 'react'\nimport ReactDOM from 'react-dom/client'\nimport {\n  Outlet,\n  RouterProvider,\n  Link,\n  createRouter,\n  createRoute,\n  createRootRoute,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n      <div className=\"p-2 flex gap-2\">\n        <Link to=\"/\" className=\"[&.active]:font-bold\">\n          Home\n        </Link>{' '}\n        <Link to=\"/about\" className=\"[&.active]:font-bold\">\n          About\n        </Link>\n      </div>\n      <hr />\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n})\n\nconst indexRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: '/',\n  component: function Index() {\n    return (\n      <div className=\"p-2\">\n        <h3>Welcome Home!</h3>\n      </div>\n    )\n  },\n})\n\nconst aboutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: '/about',\n  component: function About() {\n    return <div className=\"p-2\">Hello from About!</div>\n  },\n})\n\nconst routeTree = rootRoute.addChildren([indexRoute, aboutRoute])\n\nconst router = createRouter({ routeTree })\n\ndeclare module '@tanstack/react-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nconst rootElement = document.getElementById('app')!\nif (!rootElement.innerHTML) {\n  const root = ReactDOM.createRoot(rootElement)\n  root.render(\n    <StrictMode>\n      <RouterProvider router={router} />\n    </StrictMode>,\n  )\n}\n```\n\n# Solid\n\n```tsx\n/* @refresh reload */\nimport { render } from 'solid-js/web'\nimport {\n  Outlet,\n  RouterProvider,\n  Link,\n  createRouter,\n  createRoute,\n  createRootRoute,\n} from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n      <div class=\"p-2 flex gap-2\">\n        <Link to=\"/\" class=\"[&.active]:font-bold\">\n          Home\n        </Link>{' '}\n        <Link to=\"/about\" class=\"[&.active]:font-bold\">\n          About\n        </Link>\n      </div>\n      <hr />\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n})\n\nconst indexRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: '/',\n  component: function Index() {\n    return (\n      <div class=\"p-2\">\n        <h3>Welcome Home!</h3>\n      </div>\n    )\n  },\n})\n\nconst aboutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: '/about',\n  component: function About() {\n    return <div class=\"p-2\">Hello from About!</div>\n  },\n})\n\nconst routeTree = rootRoute.addChildren([indexRoute, aboutRoute])\n\nconst router = createRouter({ routeTree })\n\ndeclare module '@tanstack/solid-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nconst rootElement = document.getElementById('app')!\nrender(() => <RouterProvider router={router} />, rootElement)\n```\n\n<!-- ::end:framework -->\n\nIf you glossed over these examples or didn't understand something, we don't blame you, because there's so much more to learn to really take advantage of TanStack Router! Let's move on.\n\n# Installation with Esbuild\n\nTo use file-based routing with **Esbuild**, you'll need to install the `@tanstack/router-plugin` package.\n\n<!-- ::start:tabs variant=\"package-manager\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-plugin\nsolid: @tanstack/router-plugin\n\n<!-- ::end:tabs -->\n\nOnce installed, you'll need to add the plugin to your configuration.\n\n<!-- ::start:framework -->\n\n# React\n\n```ts title=\"esbuild.config.js\"\nimport { tanstackRouter } from '@tanstack/router-plugin/esbuild'\n\nexport default {\n  // ...\n  plugins: [\n    tanstackRouter({\n      target: 'react',\n      autoCodeSplitting: true,\n    }),\n  ],\n}\n```\n\nOr, you can clone our [Quickstart Esbuild example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-esbuild-file-based) and get started.\n\n# Solid\n\n```ts title=\"build.js\"\nimport * as esbuild from 'esbuild'\nimport { solidPlugin } from 'esbuild-plugin-solid'\nimport { tanstackRouter } from '@tanstack/router-plugin/esbuild'\n\nconst isDev = process.argv.includes('--dev')\n\nconst ctx = await esbuild.context({\n  entryPoints: ['src/main.tsx'],\n  outfile: 'dist/main.js',\n  minify: !isDev,\n  bundle: true,\n  format: 'esm',\n  target: ['esnext'],\n  sourcemap: true,\n  plugins: [\n    solidPlugin(),\n    tanstackRouter({ target: 'solid', autoCodeSplitting: true }),\n  ],\n})\n\nif (isDev) {\n  await ctx.watch()\n  const { host, port } = await ctx.serve({ servedir: '.', port: 3005 })\n  console.log(`Server running at http://${host || 'localhost'}:${port}`)\n} else {\n  await ctx.rebuild()\n  await ctx.dispose()\n}\n```\n\nOr, you can clone our [Quickstart Esbuild example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-esbuild-file-based) and get started.\n\n<!-- ::end:framework -->\n\nNow that you've added the plugin to your Esbuild configuration, you're all set to start using file-based routing with TanStack Router.\n\n## Ignoring the generated route tree file\n\nIf your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.\n\nHere are some resources to help you ignore the generated route tree file:\n\n- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)\n- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)\n- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)\n\n> [!WARNING]\n> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.\n\nYou can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:\n\n```json\n{\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n```\n\nYou can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.\n\n## Configuration\n\nWhen using the TanStack Router Plugin with Esbuild for File-based routing, it comes with some sane defaults that should work for most projects:\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\"\n}\n```\n\nIf these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.\n\nYou can find all the available configuration options in the [File-based Routing API Reference](../api/file-based-routing.md).\n\n# Installation with Router CLI\n\n> [!WARNING]\n> You should only use the TanStack Router CLI if you are not using a supported bundler. The CLI only supports the generation of the route tree file and does not provide any other features.\n\nTo use file-based routing with the TanStack Router CLI, you'll need to install the `@tanstack/router-cli` package.\n\n<!-- ::start:tabs variant=\"package-manager\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-cli\nsolid: @tanstack/router-cli\n\n<!-- ::end:tabs -->\n\nOnce installed, you'll need to amend your scripts in your `package.json` for the CLI to `watch` and `generate` files.\n\n```json\n{\n  \"scripts\": {\n    \"generate-routes\": \"tsr generate\",\n    \"watch-routes\": \"tsr watch\",\n    \"build\": \"npm run generate-routes && ...\",\n    \"dev\": \"npm run watch-routes && ...\"\n  }\n}\n```\n\n<!-- ::start:framework -->\n\n# Solid\n\nIf you are using TypeScript, you should also add the following options to your `tsconfig.json`:\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"preserve\",\n    \"jsxImportSource\": \"solid-js\"\n  }\n}\n```\n\nWith that, you're all set to start using file-based routing with TanStack Router.\n\n<!-- ::end:framework -->\n\n[//]: # 'AfterScripts'\n[//]: # 'AfterScripts'\n\nYou shouldn't forget to _ignore_ the generated route tree file. Head over to the [Ignoring the generated route tree file](#ignoring-the-generated-route-tree-file) section to learn more.\n\nWith the CLI installed, the following commands are made available via the `tsr` command\n\n## Using the `generate` command\n\nGenerates the routes for a project based on the provided configuration.\n\n```sh\ntsr generate\n```\n\n## Using the `watch` command\n\nContinuously watches the specified directories and regenerates routes as needed.\n\n**Usage:**\n\n```sh\ntsr watch\n```\n\nWith file-based routing enabled, whenever you start your application in development mode, TanStack Router will watch your configured `routesDirectory` and generate your route tree whenever a file is added, removed, or changed.\n\n## Ignoring the generated route tree file\n\nIf your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.\n\nHere are some resources to help you ignore the generated route tree file:\n\n- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)\n- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)\n- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)\n\n> [!WARNING]\n> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.\n\nYou can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:\n\n```json\n{\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n```\n\nYou can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.\n\n## Configuration\n\nWhen using the TanStack Router CLI for File-based routing, it comes with some sane defaults that should work for most projects:\n\n<!-- ::start:framework -->\n\n# React\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\",\n  \"target\": \"react\"\n}\n```\n\n# Solid\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\",\n  \"target\": \"solid\"\n}\n```\n\n<!-- ::end:framework -->\n\nIf these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by creating a `tsr.config.json` file in the root of your project directory.\n\nYou can find all the available configuration options in the [File-based Routing API Reference](../api/file-based-routing.md).\n\n# Installation with Rspack\n\nTo use file-based routing with **Rspack** or **Rsbuild**, you'll need to install the `@tanstack/router-plugin` package.\n\n<!-- ::start:tabs variant=\"package-manager\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-plugin\nsolid: @tanstack/router-plugin\n\n<!-- ::end:tabs -->\n\nOnce installed, you'll need to add the plugin to your configuration.\n\n<!-- ::start:framework -->\n\n# React\n\n```ts title=\"rsbuild.config.ts\"\nimport { defineConfig } from '@rsbuild/core'\nimport { pluginReact } from '@rsbuild/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/rspack'\n\nexport default defineConfig({\n  plugins: [pluginReact()],\n  tools: {\n    rspack: {\n      plugins: [\n        tanstackRouter({\n          target: 'react',\n          autoCodeSplitting: true,\n        }),\n      ],\n    },\n  },\n})\n```\n\nOr, you can clone our [Quickstart Rspack/Rsbuild example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-rspack-file-based) and get started.\n\n# Solid\n\n```ts title=\"rsbuild.config.ts\"\nimport { defineConfig } from '@rsbuild/core'\nimport { pluginBabel } from '@rsbuild/plugin-babel'\nimport { pluginSolid } from '@rsbuild/plugin-solid'\nimport { tanstackRouter } from '@tanstack/router-plugin/rspack'\n\nexport default defineConfig({\n  plugins: [\n    pluginBabel({\n      include: /.(?:jsx|tsx)$/,\n    }),\n    pluginSolid(),\n  ],\n  tools: {\n    rspack: {\n      plugins: [tanstackRouter({ target: 'solid', autoCodeSplitting: true })],\n    },\n  },\n})\n```\n\nOr, you can clone our [Quickstart Rspack/Rsbuild example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-rspack-file-based) and get started.\n\n<!-- ::end:framework -->\n\nNow that you've added the plugin to your Rspack/Rsbuild configuration, you're all set to start using file-based routing with TanStack Router.\n\n## Ignoring the generated route tree file\n\nIf your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.\n\nHere are some resources to help you ignore the generated route tree file:\n\n- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)\n- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)\n- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)\n\n> [!WARNING]\n> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.\n\nYou can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:\n\n```json\n{\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n```\n\nYou can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.\n\n## Configuration\n\nWhen using the TanStack Router Plugin with Rspack (or Rsbuild) for File-based routing, it comes with some sane defaults that should work for most projects:\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\"\n}\n```\n\nIf these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.\n\nYou can find all the available configuration options in the [File-based Routing API Reference](../api/file-based-routing.md).\n\n# Installation with Vite\n\nTo use file-based routing with **Vite**, you'll need to install the `@tanstack/router-plugin` package.\n\n<!-- ::start:tabs variant=\"package-manager\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-plugin\nsolid: @tanstack/router-plugin\n\n<!-- ::end:tabs -->\n\nOnce installed, you'll need to add the plugin to your Vite configuration.\n\n<!-- ::start:framework -->\n\n# React\n\n```ts title=\"vite.config.ts\"\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'\n    tanstackRouter({\n      target: 'react',\n      autoCodeSplitting: true,\n    }),\n    react(),\n    // ...\n  ],\n})\n```\n\nOr, you can clone our [Quickstart Vite example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-file-based) and get started.\n\n# Solid\n\n```ts title=\"vite.config.ts\"\nimport { defineConfig } from 'vite'\nimport solid from 'vite-plugin-solid'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    tanstackRouter({\n      target: 'solid',\n      autoCodeSplitting: true,\n    }),\n    solid(),\n    // ...\n  ],\n})\n```\n\nOr, you can clone our [Quickstart Vite example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-file-based) and get started.\n\n<!-- ::end:framework -->\n\nNow that you've added the plugin to your Vite configuration, you're all set to start using file-based routing with TanStack Router.\n\n## Ignoring the generated route tree file\n\nIf your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.\n\nHere are some resources to help you ignore the generated route tree file:\n\n- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)\n- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)\n- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)\n\n> [!WARNING]\n> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.\n\nYou can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:\n\n```json\n{\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n```\n\nYou can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.\n\n## Configuration\n\nWhen using the TanStack Router Plugin with Vite for File-based routing, it comes with some sane defaults that should work for most projects:\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\"\n}\n```\n\nIf these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.\n\nYou can find all the available configuration options in the [File-based Routing API Reference](../api/file-based-routing.md).\n\n# Installation with Webpack\n\nTo use file-based routing with **Webpack**, you'll need to install the `@tanstack/router-plugin` package.\n\n<!-- ::start:tabs variant=\"package-manager\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-plugin\nsolid: @tanstack/router-plugin\n\n<!-- ::end:tabs -->\n\nOnce installed, you'll need to add the plugin to your configuration.\n\n<!-- ::start:framework -->\n\n# React\n\n```ts title=\"webpack.config.ts\"\nimport { tanstackRouter } from '@tanstack/router-plugin/webpack'\n\nexport default {\n  plugins: [\n    tanstackRouter({\n      target: 'react',\n      autoCodeSplitting: true,\n    }),\n  ],\n}\n```\n\nOr, you can clone our [Quickstart Webpack example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-webpack-file-based) and get started.\n\n# Solid\n\n```ts title=\"webpack.config.ts\"\nimport { tanstackRouter } from '@tanstack/router-plugin/webpack'\n\nexport default {\n  plugins: [\n    tanstackRouter({\n      target: 'solid',\n      autoCodeSplitting: true,\n    }),\n  ],\n}\n```\n\nAnd in the .babelrc (SWC doesn't support solid-js, see [here](https://www.answeroverflow.com/m/1135200483116593182)), add these presets:\n\n```tsx\n// .babelrc\n\n{\n  \"presets\": [\"babel-preset-solid\", \"@babel/preset-typescript\"]\n}\n\n```\n\nOr, for a full webpack.config.js, you can clone our [Quickstart Webpack example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-webpack-file-based) and get started.\n\n<!-- ::end:framework -->\n\nNow that you've added the plugin to your Webpack configuration, you're all set to start using file-based routing with TanStack Router.\n\n## Ignoring the generated route tree file\n\nIf your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.\n\nHere are some resources to help you ignore the generated route tree file:\n\n- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)\n- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)\n- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)\n\n> [!WARNING]\n> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.\n\nYou can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:\n\n```json\n{\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n```\n\nYou can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.\n\n## Configuration\n\nWhen using the TanStack Router Plugin with Webpack for File-based routing, it comes with some sane defaults that should work for most projects:\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\"\n}\n```\n\nIf these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.\n\nYou can find all the available configuration options in the [File-based Routing API Reference](../api/file-based-routing.md).\n\n";
+declare const _default: "# Manual Setup\n\nTo set up TanStack Router manually in a React project, follow the steps below. This gives you a bare minimum setup to get going with TanStack Router using both file-based route generation and code-based route configuration:\n\n## Using File-Based Route Generation\n\n#### Install TanStack Router, Vite Plugin, and the Router Devtools\n\nInstall the necessary core dependencies:\n\n<!-- ::start:tabs variant=\"package-managers\" -->\n\nreact: @tanstack/react-router @tanstack/react-router-devtools\nsolid: @tanstack/solid-router @tanstack/solid-router-devtools\n\n<!-- ::end:tabs -->\n\nInstall the necessary development dependencies:\n\n<!-- ::start:tabs variant=\"package-managers\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-plugin\nsolid: @tanstack/router-plugin\n\n<!-- ::end:tabs -->\n\n#### Configure the Vite Plugin\n\n```tsx\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'\n    tanstackRouter({\n      target: 'react',\n      autoCodeSplitting: true,\n    }),\n    react(),\n    // ...,\n  ],\n})\n```\n\n> [!TIP]\n> If you are not using Vite, or any of the supported bundlers, you can check out the [TanStack Router CLI](./with-router-cli) guide for more info.\n\nCreate the following files:\n\n- `src/routes/__root.tsx` (with two '`_`' characters)\n- `src/routes/index.tsx`\n- `src/routes/about.tsx`\n- `src/main.tsx`\n\n<!-- ::start:framework -->\n\n# React\n\n<!-- ::start:tabs variant=\"files\" -->\n\n```tsx title=\"src/routes/__root.tsx\"\nimport { createRootRoute, Link, Outlet } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nconst RootLayout = () => (\n  <>\n    <div className=\"p-2 flex gap-2\">\n      <Link to=\"/\" className=\"[&.active]:font-bold\">\n        Home\n      </Link>{' '}\n      <Link to=\"/about\" className=\"[&.active]:font-bold\">\n        About\n      </Link>\n    </div>\n    <hr />\n    <Outlet />\n    <TanStackRouterDevtools />\n  </>\n)\n\nexport const Route = createRootRoute({ component: RootLayout })\n```\n\n```tsx title=\"src/routes/index.tsx\"\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/')({\n  component: Index,\n})\n\nfunction Index() {\n  return (\n    <div className=\"p-2\">\n      <h3>Welcome Home!</h3>\n    </div>\n  )\n}\n```\n\n```tsx title=\"src/routes/about.tsx\"\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/about')({\n  component: About,\n})\n\nfunction About() {\n  return <div className=\"p-2\">Hello from About!</div>\n}\n```\n\n```tsx title=\"src/main.tsx\"\nimport { StrictMode } from 'react'\nimport ReactDOM from 'react-dom/client'\nimport { RouterProvider, createRouter } from '@tanstack/react-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nconst router = createRouter({ routeTree })\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\n// Render the app\nconst rootElement = document.getElementById('root')!\nif (!rootElement.innerHTML) {\n  const root = ReactDOM.createRoot(rootElement)\n  root.render(\n    <StrictMode>\n      <RouterProvider router={router} />\n    </StrictMode>,\n  )\n}\n```\n\n<!-- ::end:tabs -->\n\n# Solid\n\n<!-- ::start:tabs variant=\"files\" -->\n\n```tsx title=\"src/routes/__root.tsx\"\nimport { createRootRoute, Link, Outlet } from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nconst RootLayout = () => (\n  <>\n    <div class=\"p-2 flex gap-2\">\n      <Link to=\"/\" class=\"[&.active]:font-bold\">\n        Home\n      </Link>{' '}\n      <Link to=\"/about\" class=\"[&.active]:font-bold\">\n        About\n      </Link>\n    </div>\n    <hr />\n    <Outlet />\n    <TanStackRouterDevtools />\n  </>\n)\n\nexport const Route = createRootRoute({ component: RootLayout })\n```\n\n```tsx title=\"src/routes/index.tsx\"\nimport { createFileRoute } from '@tanstack/solid-router'\n\nexport const Route = createFileRoute('/')({\n  component: Index,\n})\n\nfunction Index() {\n  return (\n    <div class=\"p-2\">\n      <h3>Welcome Home!</h3>\n    </div>\n  )\n}\n```\n\n```tsx title=\"src/routes/about.tsx\"\nimport { createFileRoute } from '@tanstack/solid-router'\n\nexport const Route = createFileRoute('/about')({\n  component: About,\n})\n\nfunction About() {\n  return <div class=\"p-2\">Hello from About!</div>\n}\n```\n\n```tsx title=\"src/main.tsx\"\n/* @refresh reload */\nimport { render } from 'solid-js/web'\nimport { RouterProvider, createRouter } from '@tanstack/solid-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nconst router = createRouter({ routeTree })\n\n// Register the router instance for type safety\ndeclare module '@tanstack/solid-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\n// Render the app\nconst rootElement = document.getElementById('root')!\n\nrender(() => <RouterProvider router={router} />, rootElement)\n```\n\n<!-- ::end:tabs -->\n\n<!-- ::end:framework -->\n\nRegardless of whether you are using the `@tanstack/router-plugin` package and running the `npm run dev`/`npm run build` scripts, or manually running the `tsr watch`/`tsr generate` commands from your package scripts, the route tree file will be generated at `src/routeTree.gen.ts`.\n\nIf you are working with this pattern you should change the `id` of the root `<div>` on your `index.html` file to `<div id='root'></div>`\n\n## Using Code-Based Route Configuration\n\n> [!IMPORTANT]\n> The following example shows how to configure routes using code, and for simplicity's sake is in a single file for this demo. While code-based generation allows you to declare many routes and even the router instance in a single file, we recommend splitting your routes into separate files for better organization and performance as your application grows.\n\n<!-- ::start:framework -->\n\n# React\n\n```tsx\nimport { StrictMode } from 'react'\nimport ReactDOM from 'react-dom/client'\nimport {\n  Outlet,\n  RouterProvider,\n  Link,\n  createRouter,\n  createRoute,\n  createRootRoute,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n      <div className=\"p-2 flex gap-2\">\n        <Link to=\"/\" className=\"[&.active]:font-bold\">\n          Home\n        </Link>{' '}\n        <Link to=\"/about\" className=\"[&.active]:font-bold\">\n          About\n        </Link>\n      </div>\n      <hr />\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n})\n\nconst indexRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: '/',\n  component: function Index() {\n    return (\n      <div className=\"p-2\">\n        <h3>Welcome Home!</h3>\n      </div>\n    )\n  },\n})\n\nconst aboutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: '/about',\n  component: function About() {\n    return <div className=\"p-2\">Hello from About!</div>\n  },\n})\n\nconst routeTree = rootRoute.addChildren([indexRoute, aboutRoute])\n\nconst router = createRouter({ routeTree })\n\ndeclare module '@tanstack/react-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nconst rootElement = document.getElementById('app')!\nif (!rootElement.innerHTML) {\n  const root = ReactDOM.createRoot(rootElement)\n  root.render(\n    <StrictMode>\n      <RouterProvider router={router} />\n    </StrictMode>,\n  )\n}\n```\n\n# Solid\n\n```tsx\n/* @refresh reload */\nimport { render } from 'solid-js/web'\nimport {\n  Outlet,\n  RouterProvider,\n  Link,\n  createRouter,\n  createRoute,\n  createRootRoute,\n} from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nconst rootRoute = createRootRoute({\n  component: () => (\n    <>\n      <div class=\"p-2 flex gap-2\">\n        <Link to=\"/\" class=\"[&.active]:font-bold\">\n          Home\n        </Link>{' '}\n        <Link to=\"/about\" class=\"[&.active]:font-bold\">\n          About\n        </Link>\n      </div>\n      <hr />\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n})\n\nconst indexRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: '/',\n  component: function Index() {\n    return (\n      <div class=\"p-2\">\n        <h3>Welcome Home!</h3>\n      </div>\n    )\n  },\n})\n\nconst aboutRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: '/about',\n  component: function About() {\n    return <div class=\"p-2\">Hello from About!</div>\n  },\n})\n\nconst routeTree = rootRoute.addChildren([indexRoute, aboutRoute])\n\nconst router = createRouter({ routeTree })\n\ndeclare module '@tanstack/solid-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nconst rootElement = document.getElementById('app')!\nrender(() => <RouterProvider router={router} />, rootElement)\n```\n\n<!-- ::end:framework -->\n\nIf you glossed over these examples or didn't understand something, we don't blame you, because there's so much more to learn to really take advantage of TanStack Router! Let's move on.\n\n# Migration from React Location\n\nBefore you begin your journey in migrating from React Location, it's important that you have a good understanding of the [Routing Concepts](../routing/routing-concepts.md) and [Design Decisions](../decisions-on-dx.md) used by TanStack Router.\n\n## Differences between React Location and TanStack Router\n\nReact Location and TanStack Router share much of same design decisions concepts, but there are some key differences that you should be aware of.\n\n- React Location uses _generics_ to infer types for routes, while TanStack Router uses _module declaration merging_ to infer types.\n- Route configuration in React Location is done using a single array of route definitions, while in TanStack Router, route configuration is done using a tree of route definitions starting with the [root route](../routing/routing-concepts.md#the-root-route).\n- [File-based routing](../routing/file-based-routing.md) is the recommended way to define routes in TanStack Router, while React Location only allows you to define routes in a single file using a code-based approach.\n  - TanStack Router does support a [code-based approach](../routing/code-based-routing.md) to defining routes, but it is not recommended for most use cases. You can read more about why, over here: [why is file-based routing the preferred way to define routes?](../decisions-on-dx.md#why-is-file-based-routing-the-preferred-way-to-define-routes)\n\n## Migration guide\n\nIn this guide we'll go over the process of migrating the [React Location Basic example](https://github.com/TanStack/router/tree/react-location/examples/basic) over to TanStack Router using file-based routing, with the end goal of having the same functionality as the original example (styling and other non-routing related code will be omitted).\n\n> [!TIP]\n> To use a code-based approach for defining your routes, you can read the [code-based Routing](../routing/code-based-routing.md) guide.\n\n### Step 1: Swap over to TanStack Router's dependencies\n\nFirst, we need to install the dependencies for TanStack Router. For detailed installation instructions, see our [How to Install TanStack Router](../how-to/install.md) guide.\n\n```sh\nnpm install @tanstack/react-router @tanstack/router-devtools\n```\n\nAnd remove the React Location dependencies.\n\n```sh\nnpm uninstall @tanstack/react-location @tanstack/react-location-devtools\n```\n\n### Step 2: Use the file-based routing watcher\n\nIf your project uses Vite (or one of the supported bundlers), you can use the TanStack Router plugin to watch for changes in your routes files and automatically update the routes configuration.\n\nInstallation of the Vite plugin:\n\n```sh\nnpm install -D @tanstack/router-plugin\n```\n\nAnd add it to your `vite.config.js`:\n\n```js\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\nexport default defineConfig({\n  // ...\n  plugins: [tanstackRouter(), react()],\n})\n```\n\nHowever, if your application does not use Vite, you use one of our other [supported bundlers](../routing/file-based-routing.md#getting-started-with-file-based-routing), or you can use the `@tanstack/router-cli` package to watch for changes in your routes files and automatically update the routes configuration.\n\n### Step 3: Add the file-based configuration file to your project\n\nCreate a `tsr.config.json` file in the root of your project with the following content:\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\"\n}\n```\n\nYou can find the full list of options for the `tsr.config.json` file in the [File-Based Routing](../routing/file-based-routing.md) guide.\n\n### Step 4: Create the routes directory\n\nCreate a `routes` directory in the `src` directory of your project.\n\n```sh\nmkdir src/routes\n```\n\n### Step 5: Create the root route file\n\n```tsx\n// src/routes/__root.tsx\nimport { createRootRoute, Outlet, Link } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/router-devtools'\n\nexport const Route = createRootRoute({\n  component: () => {\n    return (\n      <>\n        <div>\n          <Link to=\"/\" activeOptions={{ exact: true }}>\n            Home\n          </Link>\n          <Link to=\"/posts\">Posts</Link>\n        </div>\n        <hr />\n        <Outlet />\n        <TanStackRouterDevtools />\n      </>\n    )\n  },\n})\n```\n\n### Step 6: Create the index route file\n\n```tsx\n// src/routes/index.tsx\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/')({\n  component: Index,\n})\n```\n\n> You will need to move any related components and logic needed for the index route from the `src/index.tsx` file to the `src/routes/index.tsx` file.\n\n### Step 7: Create the posts route file\n\n```tsx\n// src/routes/posts.tsx\nimport { createFileRoute, Link, Outlet } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/posts')({\n  component: Posts,\n  loader: async () => {\n    const posts = await fetchPosts()\n    return {\n      posts,\n    }\n  },\n})\n\nfunction Posts() {\n  const { posts } = Route.useLoaderData()\n  return (\n    <div>\n      <nav>\n        {posts.map((post) => (\n          <Link\n            key={post.id}\n            to={`/posts/$postId`}\n            params={{ postId: post.id }}\n          >\n            {post.title}\n          </Link>\n        ))}\n      </nav>\n      <Outlet />\n    </div>\n  )\n}\n```\n\n> You will need to move any related components and logic needed for the posts route from the `src/index.tsx` file to the `src/routes/posts.tsx` file.\n\n### Step 8: Create the posts index route file\n\n```tsx\n// src/routes/posts.index.tsx\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/posts/')({\n  component: PostsIndex,\n})\n```\n\n> You will need to move any related components and logic needed for the posts index route from the `src/index.tsx` file to the `src/routes/posts.index.tsx` file.\n\n### Step 9: Create the posts id route file\n\n```tsx\n// src/routes/posts.$postId.tsx\nimport { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/posts/$postId')({\n  component: PostsId,\n  loader: async ({ params: { postId } }) => {\n    const post = await fetchPost(postId)\n    return {\n      post,\n    }\n  },\n})\n\nfunction PostsId() {\n  const { post } = Route.useLoaderData()\n  // ...\n}\n```\n\n> You will need to move any related components and logic needed for the posts id route from the `src/index.tsx` file to the `src/routes/posts.$postId.tsx` file.\n\n### Step 10: Generate the route tree\n\nIf you are using one of the supported bundlers, the route tree will be generated automatically when you run the dev script.\n\nIf you are not using one of the supported bundlers, you can generate the route tree by running the following command:\n\n```sh\nnpx tsr generate\n```\n\n### Step 11: Update the main entry file to render the Router\n\nOnce you've generated the route-tree, you can then update the `src/index.tsx` file to create the router instance and render it.\n\n```tsx\n// src/index.tsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { createRouter, RouterProvider } from '@tanstack/react-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nconst router = createRouter({ routeTree })\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n  interface Register {\n    router: typeof router\n  }\n}\n\nconst domElementId = 'root' // Assuming you have a root element with the id 'root'\n\n// Render the app\nconst rootElement = document.getElementById(domElementId)\nif (!rootElement) {\n  throw new Error(`Element with id ${domElementId} not found`)\n}\n\nReactDOM.createRoot(rootElement).render(\n  <React.StrictMode>\n    <RouterProvider router={router} />\n  </React.StrictMode>,\n)\n```\n\n### Finished!\n\nYou should now have successfully migrated your application from React Location to TanStack Router using file-based routing.\n\nReact Location also has a few more features that you might be using in your application. Here are some guides to help you migrate those features:\n\n- [Search params](../guide/search-params.md)\n- [Data loading](../guide/data-loading.md)\n- [History types](../guide/history-types.md)\n- [Wildcard / Splat / Catch-all routes](../routing/routing-concepts.md#splat--catch-all-routes)\n- [Authenticated routes](../guide/authenticated-routes.md)\n\nTanStack Router also has a few more features that you might want to explore:\n\n- [Router Context](../guide/router-context.md)\n- [Preloading](../guide/preloading.md)\n- [Pathless Layout Routes](../routing/routing-concepts.md#pathless-layout-routes)\n- [Route masking](../guide/route-masking.md)\n- [SSR](../guide/ssr.md)\n- ... and more!\n\nIf you are facing any issues or have any questions, feel free to ask for help in the TanStack Discord.\n\n# Migration from React Router Checklist\n\n**_If your UI is blank, open the console, and you will probably have some errors that read something along the lines of `cannot use 'useNavigate' outside of context` . This means there are React Router api\u2019s that are still imported and referenced that you need to find and remove. The easiest way to make sure you find all React Router imports is to uninstall `react-router-dom` and then you should get typescript errors in your files. Then you will know what to change to a `@tanstack/react-router` import._**\n\nHere is the [example repo](https://github.com/Benanna2019/SickFitsForEveryone/tree/migrate-to-tanstack/router/React-Router)\n\n- [ ] Install Router - `npm i @tanstack/react-router` (see [detailed installation guide](../how-to/install.md))\n- [ ] **Optional:** Uninstall React Router to get TypeScript errors on imports.\n  - At this point I don\u2019t know if you can do a gradual migration, but it seems likely you could have multiple router providers, not desirable.\n  - The api\u2019s between React Router and TanStack Router are very similar and could most likely be handled in a sprint cycle or two if that is your companies way of doing things.\n- [ ] Create Routes for each existing React Router route we have\n- [ ] Create root route\n- [ ] Create router instance\n- [ ] Add global module in main.tsx\n- [ ] Remove any React Router (`createBrowserRouter` or `BrowserRouter`), `Routes`, and `Route` Components from main.tsx\n- [ ] **Optional:** Refactor `render` function for custom setup/providers - The repo referenced above has an example - This was necessary in the case of Supertokens. Supertoken has a specific setup with React Router and a different setup with all other React implementations\n- [ ] Set RouterProvider and pass it the router as the prop\n- [ ] Replace all instances of React Router `Link` component with `@tanstack/react-router` `Link` component\n  - [ ] Add `to` prop with literal path\n  - [ ] Add `params` prop, where necessary with params like so `params={{ orderId: order.id }}`\n- [ ] Replace all instances of React Router `useNavigate` hook with `@tanstack/react-router` `useNavigate` hook\n  - [ ] Set `to` property and `params` property where needed\n- [ ] Replace any React Router `Outlet`'s with the `@tanstack/react-router` equivalent\n- [ ] If you are using `useSearchParams` hook from React Router, move the search params default value to the validateSearch property on a Route definition.\n  - [ ] Instead of using the `useSearchParams` hook, use `@tanstack/react-router` `Link`'s search property to update the search params state\n  - [ ] To read search params you can do something like the following\n    - `const { page } = useSearch({ from: productPage.fullPath })`\n- [ ] If using React Router\u2019s `useParams` hook, update the import to be from `@tanstack/react-router` and set the `from` property to the literal path name where you want to read the params object from\n  - So say we have a route with the path name `orders/$orderid`.\n  - In the `useParams` hook we would set up our hook like so: `const params = useParams({ from: \"/orders/$orderId\" })`\n  - Then wherever we wanted to access the order id we would get it off of the params object `params.orderId`\n\n# Installation with Esbuild\n\nTo use file-based routing with **Esbuild**, you'll need to install the `@tanstack/router-plugin` package.\n\n<!-- ::start:tabs variant=\"package-manager\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-plugin\nsolid: @tanstack/router-plugin\n\n<!-- ::end:tabs -->\n\nOnce installed, you'll need to add the plugin to your configuration.\n\n<!-- ::start:framework -->\n\n# React\n\n```ts title=\"esbuild.config.js\"\nimport { tanstackRouter } from '@tanstack/router-plugin/esbuild'\n\nexport default {\n  // ...\n  plugins: [\n    tanstackRouter({\n      target: 'react',\n      autoCodeSplitting: true,\n    }),\n  ],\n}\n```\n\nOr, you can clone our [Quickstart Esbuild example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-esbuild-file-based) and get started.\n\n# Solid\n\n```ts title=\"build.js\"\nimport * as esbuild from 'esbuild'\nimport { solidPlugin } from 'esbuild-plugin-solid'\nimport { tanstackRouter } from '@tanstack/router-plugin/esbuild'\n\nconst isDev = process.argv.includes('--dev')\n\nconst ctx = await esbuild.context({\n  entryPoints: ['src/main.tsx'],\n  outfile: 'dist/main.js',\n  minify: !isDev,\n  bundle: true,\n  format: 'esm',\n  target: ['esnext'],\n  sourcemap: true,\n  plugins: [\n    solidPlugin(),\n    tanstackRouter({ target: 'solid', autoCodeSplitting: true }),\n  ],\n})\n\nif (isDev) {\n  await ctx.watch()\n  const { host, port } = await ctx.serve({ servedir: '.', port: 3005 })\n  console.log(`Server running at http://${host || 'localhost'}:${port}`)\n} else {\n  await ctx.rebuild()\n  await ctx.dispose()\n}\n```\n\nOr, you can clone our [Quickstart Esbuild example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-esbuild-file-based) and get started.\n\n<!-- ::end:framework -->\n\nNow that you've added the plugin to your Esbuild configuration, you're all set to start using file-based routing with TanStack Router.\n\n## Ignoring the generated route tree file\n\nIf your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.\n\nHere are some resources to help you ignore the generated route tree file:\n\n- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)\n- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)\n- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)\n\n> [!WARNING]\n> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.\n\nYou can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:\n\n```json\n{\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n```\n\nYou can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.\n\n## Configuration\n\nWhen using the TanStack Router Plugin with Esbuild for File-based routing, it comes with some sane defaults that should work for most projects:\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\"\n}\n```\n\nIf these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.\n\nYou can find all the available configuration options in the [File-based Routing API Reference](../api/file-based-routing.md).\n\n# Installation with Router CLI\n\n> [!WARNING]\n> You should only use the TanStack Router CLI if you are not using a supported bundler. The CLI only supports the generation of the route tree file and does not provide any other features.\n\nTo use file-based routing with the TanStack Router CLI, you'll need to install the `@tanstack/router-cli` package.\n\n<!-- ::start:tabs variant=\"package-manager\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-cli\nsolid: @tanstack/router-cli\n\n<!-- ::end:tabs -->\n\nOnce installed, you'll need to amend your scripts in your `package.json` for the CLI to `watch` and `generate` files.\n\n```json\n{\n  \"scripts\": {\n    \"generate-routes\": \"tsr generate\",\n    \"watch-routes\": \"tsr watch\",\n    \"build\": \"npm run generate-routes && ...\",\n    \"dev\": \"npm run watch-routes && ...\"\n  }\n}\n```\n\n<!-- ::start:framework -->\n\n# Solid\n\nIf you are using TypeScript, you should also add the following options to your `tsconfig.json`:\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"preserve\",\n    \"jsxImportSource\": \"solid-js\"\n  }\n}\n```\n\nWith that, you're all set to start using file-based routing with TanStack Router.\n\n<!-- ::end:framework -->\n\n[//]: # 'AfterScripts'\n[//]: # 'AfterScripts'\n\nYou shouldn't forget to _ignore_ the generated route tree file. Head over to the [Ignoring the generated route tree file](#ignoring-the-generated-route-tree-file) section to learn more.\n\nWith the CLI installed, the following commands are made available via the `tsr` command\n\n## Using the `generate` command\n\nGenerates the routes for a project based on the provided configuration.\n\n```sh\ntsr generate\n```\n\n## Using the `watch` command\n\nContinuously watches the specified directories and regenerates routes as needed.\n\n**Usage:**\n\n```sh\ntsr watch\n```\n\nWith file-based routing enabled, whenever you start your application in development mode, TanStack Router will watch your configured `routesDirectory` and generate your route tree whenever a file is added, removed, or changed.\n\n## Ignoring the generated route tree file\n\nIf your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.\n\nHere are some resources to help you ignore the generated route tree file:\n\n- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)\n- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)\n- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)\n\n> [!WARNING]\n> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.\n\nYou can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:\n\n```json\n{\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n```\n\nYou can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.\n\n## Configuration\n\nWhen using the TanStack Router CLI for File-based routing, it comes with some sane defaults that should work for most projects:\n\n<!-- ::start:framework -->\n\n# React\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\",\n  \"target\": \"react\"\n}\n```\n\n# Solid\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\",\n  \"target\": \"solid\"\n}\n```\n\n<!-- ::end:framework -->\n\nIf these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by creating a `tsr.config.json` file in the root of your project directory.\n\nYou can find all the available configuration options in the [File-based Routing API Reference](../api/file-based-routing.md).\n\n# Installation with Rspack\n\nTo use file-based routing with **Rspack** or **Rsbuild**, you'll need to install the `@tanstack/router-plugin` package.\n\n<!-- ::start:tabs variant=\"package-manager\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-plugin\nsolid: @tanstack/router-plugin\n\n<!-- ::end:tabs -->\n\nOnce installed, you'll need to add the plugin to your configuration.\n\n<!-- ::start:framework -->\n\n# React\n\n```ts title=\"rsbuild.config.ts\"\nimport { defineConfig } from '@rsbuild/core'\nimport { pluginReact } from '@rsbuild/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/rspack'\n\nexport default defineConfig({\n  plugins: [pluginReact()],\n  tools: {\n    rspack: {\n      plugins: [\n        tanstackRouter({\n          target: 'react',\n          autoCodeSplitting: true,\n        }),\n      ],\n    },\n  },\n})\n```\n\nOr, you can clone our [Quickstart Rspack/Rsbuild example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-rspack-file-based) and get started.\n\n# Solid\n\n```ts title=\"rsbuild.config.ts\"\nimport { defineConfig } from '@rsbuild/core'\nimport { pluginBabel } from '@rsbuild/plugin-babel'\nimport { pluginSolid } from '@rsbuild/plugin-solid'\nimport { tanstackRouter } from '@tanstack/router-plugin/rspack'\n\nexport default defineConfig({\n  plugins: [\n    pluginBabel({\n      include: /.(?:jsx|tsx)$/,\n    }),\n    pluginSolid(),\n  ],\n  tools: {\n    rspack: {\n      plugins: [tanstackRouter({ target: 'solid', autoCodeSplitting: true })],\n    },\n  },\n})\n```\n\nOr, you can clone our [Quickstart Rspack/Rsbuild example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-rspack-file-based) and get started.\n\n<!-- ::end:framework -->\n\nNow that you've added the plugin to your Rspack/Rsbuild configuration, you're all set to start using file-based routing with TanStack Router.\n\n## Ignoring the generated route tree file\n\nIf your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.\n\nHere are some resources to help you ignore the generated route tree file:\n\n- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)\n- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)\n- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)\n\n> [!WARNING]\n> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.\n\nYou can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:\n\n```json\n{\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n```\n\nYou can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.\n\n## Configuration\n\nWhen using the TanStack Router Plugin with Rspack (or Rsbuild) for File-based routing, it comes with some sane defaults that should work for most projects:\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\"\n}\n```\n\nIf these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.\n\nYou can find all the available configuration options in the [File-based Routing API Reference](../api/file-based-routing.md).\n\n# Installation with Vite\n\nTo use file-based routing with **Vite**, you'll need to install the `@tanstack/router-plugin` package.\n\n<!-- ::start:tabs variant=\"package-manager\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-plugin\nsolid: @tanstack/router-plugin\n\n<!-- ::end:tabs -->\n\nOnce installed, you'll need to add the plugin to your Vite configuration.\n\n<!-- ::start:framework -->\n\n# React\n\n```ts title=\"vite.config.ts\"\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'\n    tanstackRouter({\n      target: 'react',\n      autoCodeSplitting: true,\n    }),\n    react(),\n    // ...\n  ],\n})\n```\n\nOr, you can clone our [Quickstart Vite example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-file-based) and get started.\n\n# Solid\n\n```ts title=\"vite.config.ts\"\nimport { defineConfig } from 'vite'\nimport solid from 'vite-plugin-solid'\nimport { tanstackRouter } from '@tanstack/router-plugin/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    tanstackRouter({\n      target: 'solid',\n      autoCodeSplitting: true,\n    }),\n    solid(),\n    // ...\n  ],\n})\n```\n\nOr, you can clone our [Quickstart Vite example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-file-based) and get started.\n\n<!-- ::end:framework -->\n\nNow that you've added the plugin to your Vite configuration, you're all set to start using file-based routing with TanStack Router.\n\n## Ignoring the generated route tree file\n\nIf your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.\n\nHere are some resources to help you ignore the generated route tree file:\n\n- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)\n- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)\n- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)\n\n> [!WARNING]\n> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.\n\nYou can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:\n\n```json\n{\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n```\n\nYou can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.\n\n## Configuration\n\nWhen using the TanStack Router Plugin with Vite for File-based routing, it comes with some sane defaults that should work for most projects:\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\"\n}\n```\n\nIf these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.\n\nYou can find all the available configuration options in the [File-based Routing API Reference](../api/file-based-routing.md).\n\n# Installation with Webpack\n\nTo use file-based routing with **Webpack**, you'll need to install the `@tanstack/router-plugin` package.\n\n<!-- ::start:tabs variant=\"package-manager\" mode=\"dev-install\" -->\n\nreact: @tanstack/router-plugin\nsolid: @tanstack/router-plugin\n\n<!-- ::end:tabs -->\n\nOnce installed, you'll need to add the plugin to your configuration.\n\n<!-- ::start:framework -->\n\n# React\n\n```ts title=\"webpack.config.ts\"\nimport { tanstackRouter } from '@tanstack/router-plugin/webpack'\n\nexport default {\n  plugins: [\n    tanstackRouter({\n      target: 'react',\n      autoCodeSplitting: true,\n    }),\n  ],\n}\n```\n\nOr, you can clone our [Quickstart Webpack example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-webpack-file-based) and get started.\n\n# Solid\n\n```ts title=\"webpack.config.ts\"\nimport { tanstackRouter } from '@tanstack/router-plugin/webpack'\n\nexport default {\n  plugins: [\n    tanstackRouter({\n      target: 'solid',\n      autoCodeSplitting: true,\n    }),\n  ],\n}\n```\n\nAnd in the .babelrc (SWC doesn't support solid-js, see [here](https://www.answeroverflow.com/m/1135200483116593182)), add these presets:\n\n```tsx\n// .babelrc\n\n{\n  \"presets\": [\"babel-preset-solid\", \"@babel/preset-typescript\"]\n}\n\n```\n\nOr, for a full webpack.config.js, you can clone our [Quickstart Webpack example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-webpack-file-based) and get started.\n\n<!-- ::end:framework -->\n\nNow that you've added the plugin to your Webpack configuration, you're all set to start using file-based routing with TanStack Router.\n\n## Ignoring the generated route tree file\n\nIf your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.\n\nHere are some resources to help you ignore the generated route tree file:\n\n- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)\n- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)\n- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)\n\n> [!WARNING]\n> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.\n\nYou can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:\n\n```json\n{\n  \"files.readonlyInclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"files.watcherExclude\": {\n    \"**/routeTree.gen.ts\": true\n  },\n  \"search.exclude\": {\n    \"**/routeTree.gen.ts\": true\n  }\n}\n```\n\nYou can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.\n\n## Configuration\n\nWhen using the TanStack Router Plugin with Webpack for File-based routing, it comes with some sane defaults that should work for most projects:\n\n```json\n{\n  \"routesDirectory\": \"./src/routes\",\n  \"generatedRouteTree\": \"./src/routeTree.gen.ts\",\n  \"routeFileIgnorePrefix\": \"-\",\n  \"quoteStyle\": \"single\"\n}\n```\n\nIf these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.\n\nYou can find all the available configuration options in the [File-based Routing API Reference](../api/file-based-routing.md).\n\n";
 export default _default;

package/dist/llms/rules/installation.js

@@ -384,6 +384,304 @@ render(() => <RouterProvider router={router} />, rootElement)
 
 If you glossed over these examples or didn't understand something, we don't blame you, because there's so much more to learn to really take advantage of TanStack Router! Let's move on.
 
+# Migration from React Location
+
+Before you begin your journey in migrating from React Location, it's important that you have a good understanding of the [Routing Concepts](../routing/routing-concepts.md) and [Design Decisions](../decisions-on-dx.md) used by TanStack Router.
+
+## Differences between React Location and TanStack Router
+
+React Location and TanStack Router share much of same design decisions concepts, but there are some key differences that you should be aware of.
+
+- React Location uses _generics_ to infer types for routes, while TanStack Router uses _module declaration merging_ to infer types.
+- Route configuration in React Location is done using a single array of route definitions, while in TanStack Router, route configuration is done using a tree of route definitions starting with the [root route](../routing/routing-concepts.md#the-root-route).
+- [File-based routing](../routing/file-based-routing.md) is the recommended way to define routes in TanStack Router, while React Location only allows you to define routes in a single file using a code-based approach.
+  - TanStack Router does support a [code-based approach](../routing/code-based-routing.md) to defining routes, but it is not recommended for most use cases. You can read more about why, over here: [why is file-based routing the preferred way to define routes?](../decisions-on-dx.md#why-is-file-based-routing-the-preferred-way-to-define-routes)
+
+## Migration guide
+
+In this guide we'll go over the process of migrating the [React Location Basic example](https://github.com/TanStack/router/tree/react-location/examples/basic) over to TanStack Router using file-based routing, with the end goal of having the same functionality as the original example (styling and other non-routing related code will be omitted).
+
+> [!TIP]
+> To use a code-based approach for defining your routes, you can read the [code-based Routing](../routing/code-based-routing.md) guide.
+
+### Step 1: Swap over to TanStack Router's dependencies
+
+First, we need to install the dependencies for TanStack Router. For detailed installation instructions, see our [How to Install TanStack Router](../how-to/install.md) guide.
+
+\`\`\`sh
+npm install @tanstack/react-router @tanstack/router-devtools
+\`\`\`
+
+And remove the React Location dependencies.
+
+\`\`\`sh
+npm uninstall @tanstack/react-location @tanstack/react-location-devtools
+\`\`\`
+
+### Step 2: Use the file-based routing watcher
+
+If your project uses Vite (or one of the supported bundlers), you can use the TanStack Router plugin to watch for changes in your routes files and automatically update the routes configuration.
+
+Installation of the Vite plugin:
+
+\`\`\`sh
+npm install -D @tanstack/router-plugin
+\`\`\`
+
+And add it to your \`vite.config.js\`:
+
+\`\`\`js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  // ...
+  plugins: [tanstackRouter(), react()],
+})
+\`\`\`
+
+However, if your application does not use Vite, you use one of our other [supported bundlers](../routing/file-based-routing.md#getting-started-with-file-based-routing), or you can use the \`@tanstack/router-cli\` package to watch for changes in your routes files and automatically update the routes configuration.
+
+### Step 3: Add the file-based configuration file to your project
+
+Create a \`tsr.config.json\` file in the root of your project with the following content:
+
+\`\`\`json
+{
+  "routesDirectory": "./src/routes",
+  "generatedRouteTree": "./src/routeTree.gen.ts"
+}
+\`\`\`
+
+You can find the full list of options for the \`tsr.config.json\` file in the [File-Based Routing](../routing/file-based-routing.md) guide.
+
+### Step 4: Create the routes directory
+
+Create a \`routes\` directory in the \`src\` directory of your project.
+
+\`\`\`sh
+mkdir src/routes
+\`\`\`
+
+### Step 5: Create the root route file
+
+\`\`\`tsx
+// src/routes/__root.tsx
+import { createRootRoute, Outlet, Link } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+export const Route = createRootRoute({
+  component: () => {
+    return (
+      <>
+        <div>
+          <Link to="/" activeOptions={{ exact: true }}>
+            Home
+          </Link>
+          <Link to="/posts">Posts</Link>
+        </div>
+        <hr />
+        <Outlet />
+        <TanStackRouterDevtools />
+      </>
+    )
+  },
+})
+\`\`\`
+
+### Step 6: Create the index route file
+
+\`\`\`tsx
+// src/routes/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: Index,
+})
+\`\`\`
+
+> You will need to move any related components and logic needed for the index route from the \`src/index.tsx\` file to the \`src/routes/index.tsx\` file.
+
+### Step 7: Create the posts route file
+
+\`\`\`tsx
+// src/routes/posts.tsx
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts')({
+  component: Posts,
+  loader: async () => {
+    const posts = await fetchPosts()
+    return {
+      posts,
+    }
+  },
+})
+
+function Posts() {
+  const { posts } = Route.useLoaderData()
+  return (
+    <div>
+      <nav>
+        {posts.map((post) => (
+          <Link
+            key={post.id}
+            to={\`/posts/$postId\`}
+            params={{ postId: post.id }}
+          >
+            {post.title}
+          </Link>
+        ))}
+      </nav>
+      <Outlet />
+    </div>
+  )
+}
+\`\`\`
+
+> You will need to move any related components and logic needed for the posts route from the \`src/index.tsx\` file to the \`src/routes/posts.tsx\` file.
+
+### Step 8: Create the posts index route file
+
+\`\`\`tsx
+// src/routes/posts.index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/')({
+  component: PostsIndex,
+})
+\`\`\`
+
+> You will need to move any related components and logic needed for the posts index route from the \`src/index.tsx\` file to the \`src/routes/posts.index.tsx\` file.
+
+### Step 9: Create the posts id route file
+
+\`\`\`tsx
+// src/routes/posts.$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  component: PostsId,
+  loader: async ({ params: { postId } }) => {
+    const post = await fetchPost(postId)
+    return {
+      post,
+    }
+  },
+})
+
+function PostsId() {
+  const { post } = Route.useLoaderData()
+  // ...
+}
+\`\`\`
+
+> You will need to move any related components and logic needed for the posts id route from the \`src/index.tsx\` file to the \`src/routes/posts.$postId.tsx\` file.
+
+### Step 10: Generate the route tree
+
+If you are using one of the supported bundlers, the route tree will be generated automatically when you run the dev script.
+
+If you are not using one of the supported bundlers, you can generate the route tree by running the following command:
+
+\`\`\`sh
+npx tsr generate
+\`\`\`
+
+### Step 11: Update the main entry file to render the Router
+
+Once you've generated the route-tree, you can then update the \`src/index.tsx\` file to create the router instance and render it.
+
+\`\`\`tsx
+// src/index.tsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { createRouter, RouterProvider } from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+const router = createRouter({ routeTree })
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const domElementId = 'root' // Assuming you have a root element with the id 'root'
+
+// Render the app
+const rootElement = document.getElementById(domElementId)
+if (!rootElement) {
+  throw new Error(\`Element with id \${domElementId} not found\`)
+}
+
+ReactDOM.createRoot(rootElement).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)
+\`\`\`
+
+### Finished!
+
+You should now have successfully migrated your application from React Location to TanStack Router using file-based routing.
+
+React Location also has a few more features that you might be using in your application. Here are some guides to help you migrate those features:
+
+- [Search params](../guide/search-params.md)
+- [Data loading](../guide/data-loading.md)
+- [History types](../guide/history-types.md)
+- [Wildcard / Splat / Catch-all routes](../routing/routing-concepts.md#splat--catch-all-routes)
+- [Authenticated routes](../guide/authenticated-routes.md)
+
+TanStack Router also has a few more features that you might want to explore:
+
+- [Router Context](../guide/router-context.md)
+- [Preloading](../guide/preloading.md)
+- [Pathless Layout Routes](../routing/routing-concepts.md#pathless-layout-routes)
+- [Route masking](../guide/route-masking.md)
+- [SSR](../guide/ssr.md)
+- ... and more!
+
+If you are facing any issues or have any questions, feel free to ask for help in the TanStack Discord.
+
+# Migration from React Router Checklist
+
+**_If your UI is blank, open the console, and you will probably have some errors that read something along the lines of \`cannot use 'useNavigate' outside of context\` . This means there are React Router api’s that are still imported and referenced that you need to find and remove. The easiest way to make sure you find all React Router imports is to uninstall \`react-router-dom\` and then you should get typescript errors in your files. Then you will know what to change to a \`@tanstack/react-router\` import._**
+
+Here is the [example repo](https://github.com/Benanna2019/SickFitsForEveryone/tree/migrate-to-tanstack/router/React-Router)
+
+- [ ] Install Router - \`npm i @tanstack/react-router\` (see [detailed installation guide](../how-to/install.md))
+- [ ] **Optional:** Uninstall React Router to get TypeScript errors on imports.
+  - At this point I don’t know if you can do a gradual migration, but it seems likely you could have multiple router providers, not desirable.
+  - The api’s between React Router and TanStack Router are very similar and could most likely be handled in a sprint cycle or two if that is your companies way of doing things.
+- [ ] Create Routes for each existing React Router route we have
+- [ ] Create root route
+- [ ] Create router instance
+- [ ] Add global module in main.tsx
+- [ ] Remove any React Router (\`createBrowserRouter\` or \`BrowserRouter\`), \`Routes\`, and \`Route\` Components from main.tsx
+- [ ] **Optional:** Refactor \`render\` function for custom setup/providers - The repo referenced above has an example - This was necessary in the case of Supertokens. Supertoken has a specific setup with React Router and a different setup with all other React implementations
+- [ ] Set RouterProvider and pass it the router as the prop
+- [ ] Replace all instances of React Router \`Link\` component with \`@tanstack/react-router\` \`Link\` component
+  - [ ] Add \`to\` prop with literal path
+  - [ ] Add \`params\` prop, where necessary with params like so \`params={{ orderId: order.id }}\`
+- [ ] Replace all instances of React Router \`useNavigate\` hook with \`@tanstack/react-router\` \`useNavigate\` hook
+  - [ ] Set \`to\` property and \`params\` property where needed
+- [ ] Replace any React Router \`Outlet\`'s with the \`@tanstack/react-router\` equivalent
+- [ ] If you are using \`useSearchParams\` hook from React Router, move the search params default value to the validateSearch property on a Route definition.
+  - [ ] Instead of using the \`useSearchParams\` hook, use \`@tanstack/react-router\` \`Link\`'s search property to update the search params state
+  - [ ] To read search params you can do something like the following
+    - \`const { page } = useSearch({ from: productPage.fullPath })\`
+- [ ] If using React Router’s \`useParams\` hook, update the import to be from \`@tanstack/react-router\` and set the \`from\` property to the literal path name where you want to read the params object from
+  - So say we have a route with the path name \`orders/$orderid\`.
+  - In the \`useParams\` hook we would set up our hook like so: \`const params = useParams({ from: "/orders/$orderId" })\`
+  - Then wherever we wanted to access the order id we would get it off of the params object \`params.orderId\`
+
 # Installation with Esbuild
 
 To use file-based routing with **Esbuild**, you'll need to install the \`@tanstack/router-plugin\` package.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.161.1",
+  "version": "1.161.4",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -74,15 +74,15 @@
     "src"
   ],
   "engines": {
-    "node": ">=12"
+    "node": ">=20.19"
   },
   "dependencies": {
-    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/react-store": "^0.9.1",
     "isbot": "^5.1.22",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "1.154.14",
-    "@tanstack/router-core": "1.161.1"
+    "@tanstack/history": "1.161.4",
+    "@tanstack/router-core": "1.161.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -92,6 +92,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "vibe-rules": "^0.2.57",
+    "vite": "*",
     "zod": "^3.24.2"
   },
   "peerDependencies": {

package/src/RouterProvider.tsx

@@ -30,7 +30,7 @@ export function RouterContextProvider<
         ...router.options.context,
         ...rest.context,
       },
-    } as any)
+    })
   }
 
   const routerContext = getRouterContext()

package/src/route.tsx

@@ -465,7 +465,7 @@ export function createRootRouteWithContext<TRouterContext extends {}>() {
       TLoaderFn,
       TSSR,
       TServerMiddlewares
-    >(options as any)
+    >(options)
   }
 }