@tanstack/react-router 1.168.4 → 1.168.6

package/dist/llms/rules/api.js

@@ -3570,7 +3570,7 @@ The \`useBlocker\` hook accepts a single _required_ argument, an option object:
 - Think of this function as telling the router if it should block the navigation, so returning \`true\` mean that it should block the navigation and \`false\` meaning that it should be allowed
 
 \`\`\`ts
-interface ShouldBlockFnLocation<...> {
+type ShouldBlockFnLocation<...> = {
   routeId: TRouteId
   fullPath: TFullPath
   pathname: string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.168.4",
+  "version": "1.168.6",
   "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.4"
+    "@tanstack/router-core": "1.168.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Match.tsx

@@ -17,11 +17,8 @@ import { SafeFragment } from './SafeFragment'
 import { renderRouteNotFound } from './renderRouteNotFound'
 import { ScrollRestoration } from './scroll-restoration'
 import { ClientOnly } from './ClientOnly'
-import type {
-  AnyRoute,
-  ParsedLocation,
-  RootRouteOptions,
-} from '@tanstack/router-core'
+import { useLayoutEffect } from './utils'
+import type { AnyRoute, RootRouteOptions } from '@tanstack/router-core'
 
 export const Match = React.memo(function MatchImpl({
   matchId,
@@ -202,53 +199,52 @@ function MatchView({
           </ResolvedCatchBoundary>
         </ResolvedSuspenseBoundary>
       </matchContext.Provider>
-      {matchState.parentRouteId === rootRouteId &&
-      router.options.scrollRestoration ? (
+      {matchState.parentRouteId === rootRouteId ? (
         <>
-          <OnRendered />
-          <ScrollRestoration />
+          <OnRendered resetKey={resetKey} />
+          {router.options.scrollRestoration && (isServer ?? router.isServer) ? (
+            <ScrollRestoration />
+          ) : null}
         </>
       ) : null}
     </ShellComponent>
   )
 }
 
-// On Rendered can't happen above the root layout because it actually
-// renders a dummy dom element to track the rendered state of the app.
-// We render a script tag with a key that changes based on the current
-// location state.__TSR_key. Also, because it's below the root layout, it
-// allows us to fire onRendered events even after a hydration mismatch
-// error that occurred above the root layout (like bad head/link tags,
-// which is common).
-function OnRendered() {
+// On Rendered can't happen above the root layout because it needs to run after
+// the route subtree has committed below the root layout. Keeping it here lets
+// us fire onRendered even after a hydration mismatch above the root layout
+// (like bad head/link tags, which is common).
+function OnRendered({ resetKey }: { resetKey: number }) {
   const router = useRouter()
 
-  const prevLocationRef = React.useRef<undefined | ParsedLocation<{}>>(
-    undefined,
-  )
+  if (isServer ?? router.isServer) {
+    return null
+  }
 
-  return (
-    <script
-      key={router.latestLocation.state.__TSR_key}
-      suppressHydrationWarning
-      ref={(el) => {
-        if (
-          el &&
-          (prevLocationRef.current === undefined ||
-            prevLocationRef.current.href !== router.latestLocation.href)
-        ) {
-          router.emit({
-            type: 'onRendered',
-            ...getLocationChangeInfo(
-              router.stores.location.state,
-              router.stores.resolvedLocation.state,
-            ),
-          })
-          prevLocationRef.current = router.latestLocation
-        }
-      }}
-    />
-  )
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const prevHrefRef = React.useRef<string | undefined>(undefined)
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useLayoutEffect(() => {
+    const currentHref = router.latestLocation.href
+
+    if (
+      prevHrefRef.current === undefined ||
+      prevHrefRef.current !== currentHref
+    ) {
+      router.emit({
+        type: 'onRendered',
+        ...getLocationChangeInfo(
+          router.stores.location.state,
+          router.stores.resolvedLocation.state,
+        ),
+      })
+      prevHrefRef.current = currentHref
+    }
+  }, [router.latestLocation.state.__TSR_key, resetKey, router])
+
+  return null
 }
 
 export const MatchInner = React.memo(function MatchInnerImpl({

package/src/ScrollRestoration.tsx

@@ -1,7 +1,5 @@
 import {
-  defaultGetScrollRestorationKey,
-  getCssSelector,
-  scrollRestorationCache,
+  getElementScrollRestorationEntry,
   setupScrollRestoration,
 } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
@@ -47,23 +45,5 @@ export function useElementScrollRestoration(
 ): ScrollRestorationEntry | undefined {
   useScrollRestoration()
 
-  const router = useRouter()
-  const getKey = options.getKey || defaultGetScrollRestorationKey
-
-  let elementSelector = ''
-
-  if (options.id) {
-    elementSelector = `[data-scroll-restoration-id="${options.id}"]`
-  } else {
-    const element = options.getElement?.()
-    if (!element) {
-      return
-    }
-    elementSelector =
-      element instanceof Window ? 'window' : getCssSelector(element)
-  }
-
-  const restoreKey = getKey(router.latestLocation)
-  const byKey = scrollRestorationCache?.state[restoreKey]
-  return byKey?.[elementSelector]
+  return getElementScrollRestorationEntry(useRouter(), options)
 }

package/src/scroll-restoration.tsx

@@ -1,45 +1,14 @@
-import {
-  defaultGetScrollRestorationKey,
-  escapeHtml,
-  restoreScroll,
-  storageKey,
-} from '@tanstack/router-core'
-import { isServer } from '@tanstack/router-core/isServer'
+import { getScrollRestorationScriptForRouter } from '@tanstack/router-core/scroll-restoration-script'
 import { useRouter } from './useRouter'
 import { ScriptOnce } from './ScriptOnce'
 
 export function ScrollRestoration() {
   const router = useRouter()
-  if (!router.isScrollRestoring || !(isServer ?? router.isServer)) {
-    return null
-  }
-  if (typeof router.options.scrollRestoration === 'function') {
-    const shouldRestore = router.options.scrollRestoration({
-      location: router.latestLocation,
-    })
-    if (!shouldRestore) {
-      return null
-    }
-  }
-  const getKey =
-    router.options.getScrollRestorationKey || defaultGetScrollRestorationKey
-  const userKey = getKey(router.latestLocation)
-  const resolvedKey =
-    userKey !== defaultGetScrollRestorationKey(router.latestLocation)
-      ? userKey
-      : undefined
+  const script = getScrollRestorationScriptForRouter(router)
 
-  const restoreScrollOptions: Parameters<typeof restoreScroll>[0] = {
-    storageKey,
-    shouldScrollRestoration: true,
-  }
-  if (resolvedKey) {
-    restoreScrollOptions.key = resolvedKey
+  if (!script) {
+    return null
   }
 
-  return (
-    <ScriptOnce
-      children={`(${restoreScroll.toString()})(${escapeHtml(JSON.stringify(restoreScrollOptions))})`}
-    />
-  )
+  return <ScriptOnce children={script} />
 }

package/src/useBlocker.tsx

@@ -12,12 +12,12 @@ import type {
   RegisteredRouter,
 } from '@tanstack/router-core'
 
-interface ShouldBlockFnLocation<
+type ShouldBlockFnLocation<
   out TRouteId,
   out TFullPath,
   out TAllParams,
   out TFullSearchSchema,
-> {
+> = {
   routeId: TRouteId
   fullPath: TFullPath
   pathname: string