@tanstack/react-router 1.168.12 → 1.168.14

package/dist/esm/useRouterState.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRouter } from "./useRouter.js";
 import { replaceEqualDeep } from "@tanstack/router-core";
 import { useRef } from "react";
@@ -20,7 +21,7 @@ function useRouterState(opts) {
 	const contextRouter = useRouter({ warn: opts?.router === void 0 });
 	const router = opts?.router || contextRouter;
 	if (isServer ?? router.isServer) {
-		const state = router.stores.__store.state;
+		const state = router.stores.__store.get();
 		return opts?.select ? opts.select(state) : state;
 	}
 	const previousResult = useRef(void 0);

package/dist/esm/useRouterState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRouterState.js","names":[],"sources":["../../src/useRouterState.tsx"],"sourcesContent":["import { useStore } from '@tanstack/react-store'\nimport { useRef } from 'react'\nimport { replaceEqualDeep } from '@tanstack/router-core'\nimport { isServer } from '@tanstack/router-core/isServer'\nimport { useRouter } from './useRouter'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  RouterState,\n} from '@tanstack/router-core'\nimport type {\n  StructuralSharingOption,\n  ValidateSelected,\n} from './structuralSharing'\n\nexport type UseRouterStateOptions<\n  TRouter extends AnyRouter,\n  TSelected,\n  TStructuralSharing,\n> = {\n  router?: TRouter\n  select?: (\n    state: RouterState<TRouter['routeTree']>,\n  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>\n} & StructuralSharingOption<TRouter, TSelected, TStructuralSharing>\n\nexport type UseRouterStateResult<\n  TRouter extends AnyRouter,\n  TSelected,\n> = unknown extends TSelected ? RouterState<TRouter['routeTree']> : TSelected\n\n/**\n * Subscribe to the router's state store with optional selection and\n * structural sharing for render optimization.\n *\n * Options:\n * - `select`: Project the full router state to a derived slice\n * - `structuralSharing`: Replace-equal semantics for stable references\n * - `router`: Read state from a specific router instance instead of context\n *\n * @returns The selected router state (or the full state by default).\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useRouterStateHook\n */\nexport function useRouterState<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TSelected = unknown,\n  TStructuralSharing extends boolean = boolean,\n>(\n  opts?: UseRouterStateOptions<TRouter, TSelected, TStructuralSharing>,\n): UseRouterStateResult<TRouter, TSelected> {\n  const contextRouter = useRouter<TRouter>({\n    warn: opts?.router === undefined,\n  })\n  const router = opts?.router || contextRouter\n\n  // During SSR we render exactly once and do not need reactivity.\n  // Avoid subscribing to the store (and any structural sharing work) on the server.\n  const _isServer = isServer ?? router.isServer\n  if (_isServer) {\n    const state = router.stores.__store.state as RouterState<\n      TRouter['routeTree']\n    >\n    return (opts?.select ? opts.select(state) : state) as UseRouterStateResult<\n      TRouter,\n      TSelected\n    >\n  }\n\n  const previousResult =\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>(undefined)\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useStore(router.stores.__store, (state) => {\n    if (opts?.select) {\n      if (opts.structuralSharing ?? router.options.defaultStructuralSharing) {\n        const newSlice = replaceEqualDeep(\n          previousResult.current,\n          opts.select(state),\n        )\n        previousResult.current = newSlice\n        return newSlice\n      }\n      return opts.select(state)\n    }\n    return state\n  }) as UseRouterStateResult<TRouter, TSelected>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2CA,SAAgB,eAKd,MAC0C;CAC1C,MAAM,gBAAgB,UAAmB,EACvC,MAAM,MAAM,WAAW,KAAA,GACxB,CAAC;CACF,MAAM,SAAS,MAAM,UAAU;AAK/B,KADkB,YAAY,OAAO,UACtB;EACb,MAAM,QAAQ,OAAO,OAAO,QAAQ;AAGpC,SAAQ,MAAM,SAAS,KAAK,OAAO,MAAM,GAAG;;CAM9C,MAAM,iBAEJ,OAAiE,KAAA,EAAU;AAG7E,QAAO,SAAS,OAAO,OAAO,UAAU,UAAU;AAChD,MAAI,MAAM,QAAQ;AAChB,OAAI,KAAK,qBAAqB,OAAO,QAAQ,0BAA0B;IACrE,MAAM,WAAW,iBACf,eAAe,SACf,KAAK,OAAO,MAAM,CACnB;AACD,mBAAe,UAAU;AACzB,WAAO;;AAET,UAAO,KAAK,OAAO,MAAM;;AAE3B,SAAO;GACP"}
+{"version":3,"file":"useRouterState.js","names":[],"sources":["../../src/useRouterState.tsx"],"sourcesContent":["'use client'\n\nimport { useStore } from '@tanstack/react-store'\nimport { useRef } from 'react'\nimport { replaceEqualDeep } from '@tanstack/router-core'\nimport { isServer } from '@tanstack/router-core/isServer'\nimport { useRouter } from './useRouter'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  RouterState,\n} from '@tanstack/router-core'\nimport type {\n  StructuralSharingOption,\n  ValidateSelected,\n} from './structuralSharing'\n\nexport type UseRouterStateOptions<\n  TRouter extends AnyRouter,\n  TSelected,\n  TStructuralSharing,\n> = {\n  router?: TRouter\n  select?: (\n    state: RouterState<TRouter['routeTree']>,\n  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>\n} & StructuralSharingOption<TRouter, TSelected, TStructuralSharing>\n\nexport type UseRouterStateResult<\n  TRouter extends AnyRouter,\n  TSelected,\n> = unknown extends TSelected ? RouterState<TRouter['routeTree']> : TSelected\n\n/**\n * Subscribe to the router's state store with optional selection and\n * structural sharing for render optimization.\n *\n * Options:\n * - `select`: Project the full router state to a derived slice\n * - `structuralSharing`: Replace-equal semantics for stable references\n * - `router`: Read state from a specific router instance instead of context\n *\n * @returns The selected router state (or the full state by default).\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useRouterStateHook\n */\nexport function useRouterState<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TSelected = unknown,\n  TStructuralSharing extends boolean = boolean,\n>(\n  opts?: UseRouterStateOptions<TRouter, TSelected, TStructuralSharing>,\n): UseRouterStateResult<TRouter, TSelected> {\n  const contextRouter = useRouter<TRouter>({\n    warn: opts?.router === undefined,\n  })\n  const router = opts?.router || contextRouter\n\n  // During SSR we render exactly once and do not need reactivity.\n  // Avoid subscribing to the store (and any structural sharing work) on the server.\n  const _isServer = isServer ?? router.isServer\n  if (_isServer) {\n    const state = router.stores.__store.get() as RouterState<\n      TRouter['routeTree']\n    >\n    return (opts?.select ? opts.select(state) : state) as UseRouterStateResult<\n      TRouter,\n      TSelected\n    >\n  }\n\n  const previousResult =\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>(undefined)\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useStore(router.stores.__store, (state) => {\n    if (opts?.select) {\n      if (opts.structuralSharing ?? router.options.defaultStructuralSharing) {\n        const newSlice = replaceEqualDeep(\n          previousResult.current,\n          opts.select(state),\n        )\n        previousResult.current = newSlice\n        return newSlice\n      }\n      return opts.select(state)\n    }\n    return state\n  }) as UseRouterStateResult<TRouter, TSelected>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,eAKd,MAC0C;CAC1C,MAAM,gBAAgB,UAAmB,EACvC,MAAM,MAAM,WAAW,KAAA,GACxB,CAAC;CACF,MAAM,SAAS,MAAM,UAAU;AAK/B,KADkB,YAAY,OAAO,UACtB;EACb,MAAM,QAAQ,OAAO,OAAO,QAAQ,KAAK;AAGzC,SAAQ,MAAM,SAAS,KAAK,OAAO,MAAM,GAAG;;CAM9C,MAAM,iBAEJ,OAAiE,KAAA,EAAU;AAG7E,QAAO,SAAS,OAAO,OAAO,UAAU,UAAU;AAChD,MAAI,MAAM,QAAQ;AAChB,OAAI,KAAK,qBAAqB,OAAO,QAAQ,0BAA0B;IACrE,MAAM,WAAW,iBACf,eAAe,SACf,KAAK,OAAO,MAAM,CACnB;AACD,mBAAe,UAAU;AACzB,WAAO;;AAET,UAAO,KAAK,OAAO,MAAM;;AAE3B,SAAO;GACP"}

package/dist/esm/utils.js

@@ -1,3 +1,4 @@
+"use client";
 import * as React$1 from "react";
 /**
 * React.use if available (React 19+), undefined otherwise.

package/dist/esm/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\n\n// Safe version of React.use() that will not cause compilation errors against\n// React 18 with Webpack, which statically analyzes imports and fails when it\n// sees React.use referenced (since 'use' is not exported from React 18).\n// This uses a dynamic string lookup to avoid the static analysis.\nconst REACT_USE = 'use'\n\n/**\n * React.use if available (React 19+), undefined otherwise.\n * Use dynamic lookup to avoid Webpack compilation errors with React 18.\n */\nexport const reactUse:\n  | (<T>(usable: Promise<T> | React.Context<T>) => T)\n  | undefined = (React as any)[REACT_USE]\n\nexport function useStableCallback<T extends (...args: Array<any>) => any>(\n  fn: T,\n): T {\n  const fnRef = React.useRef(fn)\n  fnRef.current = fn\n\n  const ref = React.useRef((...args: Array<any>) => fnRef.current(...args))\n  return ref.current as T\n}\n\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Taken from https://www.developerway.com/posts/implementing-advanced-use-previous-hook#part3\n */\nexport function usePrevious<T>(value: T): T | null {\n  // initialise the ref with previous and current values\n  const ref = React.useRef<{ value: T; prev: T | null }>({\n    value: value,\n    prev: null,\n  })\n\n  const current = ref.current.value\n\n  // if the value passed into hook doesn't match what we store as \"current\"\n  // move the \"current\" to the \"previous\"\n  // and store the passed value as \"current\"\n  if (value !== current) {\n    ref.current = {\n      value: value,\n      prev: current,\n    }\n  }\n\n  // return the previous value only\n  return ref.current.prev\n}\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param intersectionObserverOptions - The options to pass to the IntersectionObserver\n * @param options - The options to pass to the hook\n * @param callback - The callback to call when the intersection changes\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n *  ref,\n *  (entry) => { doSomething(entry) },\n *  { rootMargin: '10px' },\n *  { disabled: false }\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n  ref: React.RefObject<T | null>,\n  callback: (entry: IntersectionObserverEntry | undefined) => void,\n  intersectionObserverOptions: IntersectionObserverInit = {},\n  options: { disabled?: boolean } = {},\n) {\n  React.useEffect(() => {\n    if (\n      !ref.current ||\n      options.disabled ||\n      typeof IntersectionObserver !== 'function'\n    ) {\n      return\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      callback(entry)\n    }, intersectionObserverOptions)\n\n    observer.observe(ref.current)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [callback, intersectionObserverOptions, options.disabled, ref])\n}\n\n/**\n * React hook to take a `React.ForwardedRef` and returns a `ref` that can be used on a DOM element.\n *\n * @param ref - The forwarded ref\n * @returns The inner ref returned by `useRef`\n * @example\n * ```tsx\n * const MyComponent = React.forwardRef((props, ref) => {\n *  const innerRef = useForwardedRef(ref)\n *  return <div ref={innerRef} />\n * })\n * ```\n */\nexport function useForwardedRef<T>(ref?: React.ForwardedRef<T>) {\n  const innerRef = React.useRef<T>(null)\n  React.useImperativeHandle(ref, () => innerRef.current!, [])\n  return innerRef\n}\n"],"mappings":";;;;;AAYA,IAAa,WAEI,QARC;AAoBlB,IAAa,kBACX,OAAO,WAAW,cAAc,QAAM,kBAAkB,QAAM;;;;AAKhE,SAAgB,YAAe,OAAoB;CAEjD,MAAM,MAAM,QAAM,OAAqC;EAC9C;EACP,MAAM;EACP,CAAC;CAEF,MAAM,UAAU,IAAI,QAAQ;AAK5B,KAAI,UAAU,QACZ,KAAI,UAAU;EACL;EACP,MAAM;EACP;AAIH,QAAO,IAAI,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BrB,SAAgB,wBACd,KACA,UACA,8BAAwD,EAAE,EAC1D,UAAkC,EAAE,EACpC;AACA,SAAM,gBAAgB;AACpB,MACE,CAAC,IAAI,WACL,QAAQ,YACR,OAAO,yBAAyB,WAEhC;EAGF,MAAM,WAAW,IAAI,sBAAsB,CAAC,WAAW;AACrD,YAAS,MAAM;KACd,4BAA4B;AAE/B,WAAS,QAAQ,IAAI,QAAQ;AAE7B,eAAa;AACX,YAAS,YAAY;;IAEtB;EAAC;EAAU;EAA6B,QAAQ;EAAU;EAAI,CAAC;;;;;;;;;;;;;;;AAgBpE,SAAgB,gBAAmB,KAA6B;CAC9D,MAAM,WAAW,QAAM,OAAU,KAAK;AACtC,SAAM,oBAAoB,WAAW,SAAS,SAAU,EAAE,CAAC;AAC3D,QAAO"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/utils.ts"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\n// Safe version of React.use() that will not cause compilation errors against\n// React 18 with Webpack, which statically analyzes imports and fails when it\n// sees React.use referenced (since 'use' is not exported from React 18).\n// This uses a dynamic string lookup to avoid the static analysis.\nconst REACT_USE = 'use'\n\n/**\n * React.use if available (React 19+), undefined otherwise.\n * Use dynamic lookup to avoid Webpack compilation errors with React 18.\n */\nexport const reactUse:\n  | (<T>(usable: Promise<T> | React.Context<T>) => T)\n  | undefined = (React as any)[REACT_USE]\n\nexport function useStableCallback<T extends (...args: Array<any>) => any>(\n  fn: T,\n): T {\n  const fnRef = React.useRef(fn)\n  fnRef.current = fn\n\n  const ref = React.useRef((...args: Array<any>) => fnRef.current(...args))\n  return ref.current as T\n}\n\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Taken from https://www.developerway.com/posts/implementing-advanced-use-previous-hook#part3\n */\nexport function usePrevious<T>(value: T): T | null {\n  // initialise the ref with previous and current values\n  const ref = React.useRef<{ value: T; prev: T | null }>({\n    value: value,\n    prev: null,\n  })\n\n  const current = ref.current.value\n\n  // if the value passed into hook doesn't match what we store as \"current\"\n  // move the \"current\" to the \"previous\"\n  // and store the passed value as \"current\"\n  if (value !== current) {\n    ref.current = {\n      value: value,\n      prev: current,\n    }\n  }\n\n  // return the previous value only\n  return ref.current.prev\n}\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param intersectionObserverOptions - The options to pass to the IntersectionObserver\n * @param options - The options to pass to the hook\n * @param callback - The callback to call when the intersection changes\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n *  ref,\n *  (entry) => { doSomething(entry) },\n *  { rootMargin: '10px' },\n *  { disabled: false }\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n  ref: React.RefObject<T | null>,\n  callback: (entry: IntersectionObserverEntry | undefined) => void,\n  intersectionObserverOptions: IntersectionObserverInit = {},\n  options: { disabled?: boolean } = {},\n) {\n  React.useEffect(() => {\n    if (\n      !ref.current ||\n      options.disabled ||\n      typeof IntersectionObserver !== 'function'\n    ) {\n      return\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      callback(entry)\n    }, intersectionObserverOptions)\n\n    observer.observe(ref.current)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [callback, intersectionObserverOptions, options.disabled, ref])\n}\n\n/**\n * React hook to take a `React.ForwardedRef` and returns a `ref` that can be used on a DOM element.\n *\n * @param ref - The forwarded ref\n * @returns The inner ref returned by `useRef`\n * @example\n * ```tsx\n * const MyComponent = React.forwardRef((props, ref) => {\n *  const innerRef = useForwardedRef(ref)\n *  return <div ref={innerRef} />\n * })\n * ```\n */\nexport function useForwardedRef<T>(ref?: React.ForwardedRef<T>) {\n  const innerRef = React.useRef<T>(null)\n  React.useImperativeHandle(ref, () => innerRef.current!, [])\n  return innerRef\n}\n"],"mappings":";;;;;;AAaA,IAAa,WAEI,QARC;AAoBlB,IAAa,kBACX,OAAO,WAAW,cAAc,QAAM,kBAAkB,QAAM;;;;AAKhE,SAAgB,YAAe,OAAoB;CAEjD,MAAM,MAAM,QAAM,OAAqC;EAC9C;EACP,MAAM;EACP,CAAC;CAEF,MAAM,UAAU,IAAI,QAAQ;AAK5B,KAAI,UAAU,QACZ,KAAI,UAAU;EACL;EACP,MAAM;EACP;AAIH,QAAO,IAAI,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BrB,SAAgB,wBACd,KACA,UACA,8BAAwD,EAAE,EAC1D,UAAkC,EAAE,EACpC;AACA,SAAM,gBAAgB;AACpB,MACE,CAAC,IAAI,WACL,QAAQ,YACR,OAAO,yBAAyB,WAEhC;EAGF,MAAM,WAAW,IAAI,sBAAsB,CAAC,WAAW;AACrD,YAAS,MAAM;KACd,4BAA4B;AAE/B,WAAS,QAAQ,IAAI,QAAQ;AAE7B,eAAa;AACX,YAAS,YAAY;;IAEtB;EAAC;EAAU;EAA6B,QAAQ;EAAU;EAAI,CAAC;;;;;;;;;;;;;;;AAgBpE,SAAgB,gBAAmB,KAA6B;CAC9D,MAAM,WAAW,QAAM,OAAU,KAAK;AACtC,SAAM,oBAAoB,WAAW,SAAS,SAAU,EAAE,CAAC;AAC3D,QAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.168.12",
+  "version": "1.168.14",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -80,7 +80,7 @@
     "@tanstack/react-store": "^0.9.3",
     "isbot": "^5.1.22",
     "@tanstack/history": "1.161.6",
-    "@tanstack/router-core": "1.168.9"
+    "@tanstack/router-core": "1.168.10"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Asset.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'

package/src/CatchBoundary.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import type { ErrorRouteComponent } from './route'
 import type { ErrorInfo } from 'react'
@@ -36,9 +38,19 @@ class CatchBoundaryImpl extends React.Component<{
   }) => React.ReactNode
   onCatch?: (error: Error, errorInfo: ErrorInfo) => void
 }> {
-  state = { error: null } as { error: Error | null; resetKey: string }
-  static getDerivedStateFromProps(props: any) {
-    return { resetKey: props.getResetKey() }
+  state = { error: null } as { error: Error | null; resetKey?: string | number }
+
+  static getDerivedStateFromProps(
+    props: { getResetKey: () => string | number },
+    state: { resetKey?: string | number; error: Error | null },
+  ) {
+    const resetKey = props.getResetKey()
+
+    if (state.error && state.resetKey !== resetKey) {
+      return { resetKey, error: null }
+    }
+
+    return { resetKey }
   }
   static getDerivedStateFromError(error: Error) {
     return { error }
@@ -46,30 +58,14 @@ class CatchBoundaryImpl extends React.Component<{
   reset() {
     this.setState({ error: null })
   }
-  componentDidUpdate(
-    prevProps: Readonly<{
-      getResetKey: () => string
-      children: (props: { error: any; reset: () => void }) => any
-      onCatch?: ((error: any, info: any) => void) | undefined
-    }>,
-    prevState: any,
-  ): void {
-    if (prevState.error && prevState.resetKey !== this.state.resetKey) {
-      this.reset()
-    }
-  }
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     if (this.props.onCatch) {
       this.props.onCatch(error, errorInfo)
     }
   }
   render() {
-    // If the resetKey has changed, don't render the error
     return this.props.children({
-      error:
-        this.state.resetKey !== this.props.getResetKey()
-          ? null
-          : this.state.error,
+      error: this.state.error,
       reset: () => {
         this.reset()
       },

package/src/ClientOnly.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 export interface ClientOnlyProps {

package/src/HeadContent.dev.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { Asset } from './Asset'
 import { useRouter } from './useRouter'

package/src/HeadContent.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { Asset } from './Asset'
 import { useRouter } from './useRouter'

package/src/Match.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { useStore } from '@tanstack/react-store'
 import {
@@ -28,7 +30,7 @@ export const Match = React.memo(function MatchImpl({
   const router = useRouter()
 
   if (isServer ?? router.isServer) {
-    const match = router.stores.activeMatchStoresById.get(matchId)?.state
+    const match = router.stores.activeMatchStoresById.get(matchId)?.get()
     if (!match) {
       if (process.env.NODE_ENV !== 'production') {
         throw new Error(
@@ -47,7 +49,7 @@ export const Match = React.memo(function MatchImpl({
       <MatchView
         router={router}
         matchId={matchId}
-        resetKey={router.stores.loadedAt.state}
+        resetKey={router.stores.loadedAt.get()}
         matchState={{
           routeId,
           ssr: match.ssr,
@@ -241,8 +243,8 @@ function OnRendered({ resetKey }: { resetKey: number }) {
       router.emit({
         type: 'onRendered',
         ...getLocationChangeInfo(
-          router.stores.location.state,
-          router.stores.resolvedLocation.state,
+          router.stores.location.get(),
+          router.stores.resolvedLocation.get(),
         ),
       })
       prevHrefRef.current = currentHref
@@ -276,7 +278,7 @@ export const MatchInner = React.memo(function MatchInnerImpl({
   }
 
   if (isServer ?? router.isServer) {
-    const match = router.stores.activeMatchStoresById.get(matchId)?.state
+    const match = router.stores.activeMatchStoresById.get(matchId)?.get()
     if (!match) {
       if (process.env.NODE_ENV !== 'production') {
         throw new Error(
@@ -502,7 +504,7 @@ export const Outlet = React.memo(function OutletImpl() {
   let childMatchId: string | undefined
 
   if (isServer ?? router.isServer) {
-    const matches = router.stores.activeMatchesSnapshot.state
+    const matches = router.stores.activeMatchesSnapshot.get()
     const parentIndex = matchId
       ? matches.findIndex((match) => match.id === matchId)
       : -1

package/src/Matches.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { useStore } from '@tanstack/react-store'
 import { replaceEqualDeep, rootRouteId } from '@tanstack/router-core'
@@ -22,11 +24,8 @@ import type {
   MakeRouteMatchUnion,
   MaskOptions,
   MatchRouteOptions,
-  NoInfer,
   RegisteredRouter,
-  ResolveRelativePath,
   ResolveRoute,
-  RouteByPath,
   ToSubOptionsProps,
 } from '@tanstack/router-core'
 
@@ -78,11 +77,11 @@ function MatchesInner() {
   const router = useRouter()
   const _isServer = isServer ?? router.isServer
   const matchId = _isServer
-    ? router.stores.firstMatchId.state
+    ? router.stores.firstMatchId.get()
     : // eslint-disable-next-line react-hooks/rules-of-hooks
       useStore(router.stores.firstMatchId, (id) => id)
   const resetKey = _isServer
-    ? router.stores.loadedAt.state
+    ? router.stores.loadedAt.get()
     : // eslint-disable-next-line react-hooks/rules-of-hooks
       useStore(router.stores.loadedAt, (loadedAt) => loadedAt)
 
@@ -180,10 +179,9 @@ export type MakeMatchRouteOptions<
   // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
   children?:
     | ((
-        params?: RouteByPath<
-          TRouter['routeTree'],
-          ResolveRelativePath<TFrom, NoInfer<TTo>>
-        >['types']['allParams'],
+        params?: Expand<
+          ResolveRoute<TRouter, TFrom, TTo>['types']['allParams']
+        >,
       ) => React.ReactNode)
     | React.ReactNode
 }
@@ -242,7 +240,7 @@ export function useMatches<
     )
 
   if (isServer ?? router.isServer) {
-    const matches = router.stores.activeMatchesSnapshot.state as Array<
+    const matches = router.stores.activeMatchesSnapshot.get() as Array<
       MakeRouteMatchUnion<TRouter>
     >
     return (opts?.select ? opts.select(matches) : matches) as UseMatchesResult<

package/src/RouterProvider.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { Matches } from './Matches'
 import { routerContext } from './routerContext'

package/src/Scripts.tsx

@@ -58,10 +58,9 @@ export const Scripts = () => {
     )
 
   if (isServer ?? router.isServer) {
-    const assetScripts = getAssetScripts(
-      router.stores.activeMatchesSnapshot.state,
-    )
-    const scripts = getScripts(router.stores.activeMatchesSnapshot.state)
+    const activeMatches = router.stores.activeMatchesSnapshot.get()
+    const assetScripts = getAssetScripts(activeMatches)
+    const scripts = getScripts(activeMatches)
     return renderScripts(router, scripts, assetScripts)
   }
 

package/src/Transitioner.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { batch, useStore } from '@tanstack/react-store'
 import {
@@ -94,8 +96,8 @@ export function Transitioner() {
       router.emit({
         type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches
         ...getLocationChangeInfo(
-          router.stores.location.state,
-          router.stores.resolvedLocation.state,
+          router.stores.location.get(),
+          router.stores.resolvedLocation.get(),
         ),
       })
     }
@@ -107,8 +109,8 @@ export function Transitioner() {
       router.emit({
         type: 'onBeforeRouteMount',
         ...getLocationChangeInfo(
-          router.stores.location.state,
-          router.stores.resolvedLocation.state,
+          router.stores.location.get(),
+          router.stores.resolvedLocation.get(),
         ),
       })
     }
@@ -117,8 +119,8 @@ export function Transitioner() {
   useLayoutEffect(() => {
     if (previousIsAnyPending && !isAnyPending) {
       const changeInfo = getLocationChangeInfo(
-        router.stores.location.state,
-        router.stores.resolvedLocation.state,
+        router.stores.location.get(),
+        router.stores.resolvedLocation.get(),
       )
       router.emit({
         type: 'onResolved',
@@ -126,10 +128,8 @@ export function Transitioner() {
       })
 
       batch(() => {
-        router.stores.status.setState(() => 'idle')
-        router.stores.resolvedLocation.setState(
-          () => router.stores.location.state,
-        )
+        router.stores.status.set('idle')
+        router.stores.resolvedLocation.set(router.stores.location.get())
       })
 
       if (changeInfo.hrefChanged) {

package/src/headContentUtils.tsx

@@ -194,7 +194,7 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
     return buildTagsFromMatches(
       router,
       nonce,
-      router.stores.activeMatchesSnapshot.state,
+      router.stores.activeMatchesSnapshot.get(),
       assetCrossOrigin,
     )
   }

package/src/index.dev.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 // Development entry point - re-exports everything from index.tsx
 // but overrides HeadContent with the dev version that handles
 // dev styles cleanup after hydration

package/src/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 export {
   defer,
   isMatch,
@@ -326,6 +328,9 @@ export type {
   InferSelected,
   ValidateUseSearchResult,
   ValidateUseParamsResult,
+  SerializerExtensions,
+  RegisteredSerializableInput,
+  Serializable,
 } from '@tanstack/router-core'
 
 export { ScriptOnce } from './ScriptOnce'

package/src/link.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { useStore } from '@tanstack/react-store'
 import { flushSync } from 'react-dom'
@@ -205,7 +207,7 @@ export function useLinkProps<
     const isActive = (() => {
       if (externalLink) return false
 
-      const currentLocation = router.stores.location.state
+      const currentLocation = router.stores.location.get()
 
       const exact = activeOptions?.exact ?? false
 

package/src/matchContext.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 
 export const matchContext = React.createContext<string | undefined>(undefined)

package/src/not-found.tsx

@@ -15,8 +15,8 @@ export function CatchNotFound(props: {
   const router = useRouter()
 
   if (isServer ?? router.isServer) {
-    const pathname = router.stores.location.state.pathname
-    const status = router.stores.status.state
+    const pathname = router.stores.location.get().pathname
+    const status = router.stores.status.get()
     const resetKey = `not-found-${pathname}-${status}`
 
     return (

package/src/routerContext.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import type { AnyRouter } from '@tanstack/router-core'
 

package/src/routerStores.ts

@@ -1,4 +1,4 @@
-import { batch, createStore } from '@tanstack/react-store'
+import { batch, createAtom } from '@tanstack/react-store'
 import {
   createNonReactiveMutableStore,
   createNonReactiveReadonlyStore,
@@ -19,8 +19,8 @@ export const getStoreFactory: GetStoreConfig = (opts) => {
     }
   }
   return {
-    createMutableStore: createStore,
-    createReadonlyStore: createStore,
+    createMutableStore: createAtom,
+    createReadonlyStore: createAtom,
     batch: batch,
   }
 }

package/src/ssr/RouterClient.tsx

@@ -7,7 +7,7 @@ let hydrationPromise: Promise<void | Array<Array<void>>> | undefined
 
 export function RouterClient(props: { router: AnyRouter }) {
   if (!hydrationPromise) {
-    if (!props.router.stores.matchesId.state.length) {
+    if (!props.router.stores.matchesId.get().length) {
       hydrationPromise = hydrate(props.router)
     } else {
       hydrationPromise = Promise.resolve()

package/src/ssr/renderRouterToStream.tsx

@@ -36,7 +36,7 @@ export const renderRouterToStream = async ({
       stream as unknown as ReadableStream,
     )
     return new Response(responseStream as any, {
-      status: router.stores.statusCode.state,
+      status: router.stores.statusCode.get(),
       headers: responseHeaders,
     })
   }
@@ -79,7 +79,7 @@ export const renderRouterToStream = async ({
       reactAppPassthrough,
     )
     return new Response(responseStream as any, {
-      status: router.stores.statusCode.state,
+      status: router.stores.statusCode.get(),
       headers: responseHeaders,
     })
   }

package/src/ssr/renderRouterToString.tsx

@@ -21,7 +21,7 @@ export const renderRouterToString = async ({
     }
 
     return new Response(`<!DOCTYPE html>${html}`, {
-      status: router.stores.statusCode.state,
+      status: router.stores.statusCode.get(),
       headers: responseHeaders,
     })
   } catch (error) {

package/src/useBlocker.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { useRouter } from './useRouter'
 import type {

package/src/useCanGoBack.ts

@@ -6,7 +6,7 @@ export function useCanGoBack() {
   const router = useRouter()
 
   if (isServer ?? router.isServer) {
-    return router.stores.location.state.state.__TSR_index !== 0
+    return router.stores.location.get().state.__TSR_index !== 0
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static

package/src/useLocation.tsx

@@ -52,7 +52,7 @@ export function useLocation<
   const router = useRouter<TRouter>()
 
   if (isServer ?? router.isServer) {
-    const location = router.stores.location.state
+    const location = router.stores.location.get()
     return (
       opts?.select ? opts.select(location as any) : location
     ) as UseLocationResult<TRouter, TSelected>

package/src/useMatch.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { useStore } from '@tanstack/react-store'
 import { invariant, replaceEqualDeep } from '@tanstack/router-core'
@@ -19,9 +21,8 @@ import type {
 } from '@tanstack/router-core'
 
 const dummyStore = {
-  state: undefined,
   get: () => undefined,
-  subscribe: () => () => {},
+  subscribe: () => ({ unsubscribe: () => {} }),
 } as any
 
 export interface UseMatchBaseOptions<
@@ -117,7 +118,7 @@ export function useMatch<
     : undefined
 
   if (isServer ?? router.isServer) {
-    const match = matchStore?.state
+    const match = matchStore?.get()
     if ((opts.shouldThrow ?? true) && !match) {
       if (process.env.NODE_ENV !== 'production') {
         throw new Error(

package/src/useNavigate.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { useLayoutEffect } from './utils'
 import { useRouter } from './useRouter'

package/src/useRouter.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { routerContext } from './routerContext'
 import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'

package/src/useRouterState.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useStore } from '@tanstack/react-store'
 import { useRef } from 'react'
 import { replaceEqualDeep } from '@tanstack/router-core'
@@ -57,7 +59,7 @@ export function useRouterState<
   // Avoid subscribing to the store (and any structural sharing work) on the server.
   const _isServer = isServer ?? router.isServer
   if (_isServer) {
-    const state = router.stores.__store.state as RouterState<
+    const state = router.stores.__store.get() as RouterState<
       TRouter['routeTree']
     >
     return (opts?.select ? opts.select(state) : state) as UseRouterStateResult<

package/src/utils.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 
 // Safe version of React.use() that will not cause compilation errors against