@tanstack/react-router 1.168.5 → 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.5",
+  "version": "1.168.6",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",

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,
@@ -204,7 +201,7 @@ function MatchView({
       </matchContext.Provider>
       {matchState.parentRouteId === rootRouteId ? (
         <>
-          <OnRendered />
+          <OnRendered resetKey={resetKey} />
           {router.options.scrollRestoration && (isServer ?? router.isServer) ? (
             <ScrollRestoration />
           ) : null}
@@ -214,42 +211,40 @@ function MatchView({
   )
 }
 
-// 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/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