@tanstack/react-router 1.132.0-alpha.3 → 1.132.0-alpha.8

package/src/scroll-restoration.tsx

@@ -8,6 +8,17 @@ import { ScriptOnce } from './ScriptOnce'
 
 export function ScrollRestoration() {
   const router = useRouter()
+  if (!router.isScrollRestoring || !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)
@@ -16,10 +27,6 @@ export function ScrollRestoration() {
       ? userKey
       : undefined
 
-  if (!router.isScrollRestoring || !router.isServer) {
-    return null
-  }
-
   const restoreScrollOptions: Parameters<typeof restoreScroll>[0] = {
     storageKey,
     shouldScrollRestoration: true,

package/src/ssr/serializer.ts

@@ -0,0 +1,7 @@
+import type * as React from 'react'
+
+declare module '@tanstack/router-core' {
+  export interface SerializerExtensions {
+    ReadableStream: React.JSX.Element
+  }
+}

package/src/useActiveLocation.ts

@@ -0,0 +1,57 @@
+import { last } from '@tanstack/router-core'
+import { useCallback, useEffect, useState } from 'react'
+import { useRouter } from './useRouter'
+import { useMatch } from './useMatch'
+import { useRouterState } from './useRouterState'
+import type { ParsedLocation } from '@tanstack/router-core'
+
+export type UseActiveLocationResult = {
+  activeLocation: ParsedLocation
+  getFromPath: (from?: string) => string
+  setActiveLocation: (location?: ParsedLocation) => void
+}
+
+export const useActiveLocation = (
+  location?: ParsedLocation,
+): UseActiveLocationResult => {
+  const router = useRouter()
+  const routerLocation = useRouterState({ select: (state) => state.location })
+  const [activeLocation, setActiveLocation] = useState<ParsedLocation>(
+    location ?? routerLocation,
+  )
+  const [customActiveLocation, setCustomActiveLocation] = useState<
+    ParsedLocation | undefined
+  >(location)
+
+  useEffect(() => {
+    setActiveLocation(customActiveLocation ?? routerLocation)
+  }, [routerLocation, customActiveLocation])
+
+  const matchIndex = useMatch({
+    strict: false,
+    select: (match) => match.index,
+  })
+
+  const getFromPath = useCallback(
+    (from?: string) => {
+      const activeLocationMatches = router.matchRoutes(activeLocation, {
+        _buildLocation: false,
+      })
+
+      const activeLocationMatch = last(activeLocationMatches)
+
+      return (
+        from ??
+        activeLocationMatch?.fullPath ??
+        router.state.matches[matchIndex]!.fullPath
+      )
+    },
+    [activeLocation, matchIndex, router],
+  )
+
+  return {
+    activeLocation,
+    getFromPath,
+    setActiveLocation: setCustomActiveLocation,
+  }
+}

package/src/useBlocker.tsx

@@ -176,7 +176,7 @@ export function useBlocker(
       function getLocation(
         location: HistoryLocation,
       ): AnyShouldBlockFnLocation {
-        const parsedLocation = router.parseLocation(undefined, location)
+        const parsedLocation = router.parseLocation(location)
         const matchedRoutes = router.getMatchedRoutes(
           parsedLocation.pathname,
           undefined,

package/src/useNavigate.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useRouter } from './useRouter'
-import { useMatch } from './useMatch'
+import { useActiveLocation } from './useActiveLocation'
 import type {
   AnyRouter,
   FromPathOption,
@@ -15,29 +15,21 @@ export function useNavigate<
 >(_defaultOpts?: {
   from?: FromPathOption<TRouter, TDefaultFrom>
 }): UseNavigateResult<TDefaultFrom> {
-  const { navigate, state } = useRouter()
+  const router = useRouter()
 
-  // Just get the index of the current match to avoid rerenders
-  // as much as possible
-  const matchIndex = useMatch({
-    strict: false,
-    select: (match) => match.index,
-  })
+  const { getFromPath, activeLocation } = useActiveLocation()
 
   return React.useCallback(
     (options: NavigateOptions) => {
-      const from =
-        options.from ??
-        _defaultOpts?.from ??
-        state.matches[matchIndex]!.fullPath
+      const from = getFromPath(options.from ?? _defaultOpts?.from)
 
-      return navigate({
+      return router.navigate({
         ...options,
         from,
       })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [_defaultOpts?.from, navigate],
+    [_defaultOpts?.from, router, getFromPath, activeLocation],
   ) as UseNavigateResult<TDefaultFrom>
 }