@tanstack/react-router 1.120.7 → 1.121.0-alpha.11

package/src/link.tsx

@@ -16,7 +16,7 @@ import {
   useLayoutEffect,
 } from './utils'
 
-import { useMatches } from './Matches'
+import { useMatch } from './useMatch'
 import type {
   AnyRouter,
   Constrain,
@@ -105,26 +105,28 @@ export function useLinkProps<
     structuralSharing: true as any,
   })
 
-  // when `from` is not supplied, use the leaf route of the current matches as the `from` location
-  // so relative routing works as expected
-  const from = useMatches({
-    select: (matches) => options.from ?? matches[matches.length - 1]?.fullPath,
+  const nearestFrom = useMatch({
+    strict: false,
+    select: (match) => match.fullPath,
   })
+
+  const from = options.from ?? nearestFrom
+
   // Use it as the default `from` location
-  const _options = React.useMemo(() => ({ ...options, from }), [options, from])
+  options = { ...options, from }
 
   const next = React.useMemo(
-    () => router.buildLocation(_options as any),
+    () => router.buildLocation(options as any),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [router, _options, currentSearch],
+    [router, options, currentSearch],
   )
 
   const preload = React.useMemo(() => {
-    if (_options.reloadDocument) {
+    if (options.reloadDocument) {
       return false
     }
     return userPreload ?? router.options.defaultPreload
-  }, [router.options.defaultPreload, userPreload, _options.reloadDocument])
+  }, [router.options.defaultPreload, userPreload, options.reloadDocument])
   const preloadDelay =
     userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0
 
@@ -175,11 +177,11 @@ export function useLinkProps<
   })
 
   const doPreload = React.useCallback(() => {
-    router.preloadRoute(_options as any).catch((err) => {
+    router.preloadRoute(options as any).catch((err) => {
       console.warn(err)
       console.warn(preloadWarning)
     })
-  }, [_options, router])
+  }, [options, router])
 
   const preloadViewportIoCallback = React.useCallback(
     (entry: IntersectionObserverEntry | undefined) => {
@@ -249,14 +251,14 @@ export function useLinkProps<
       // All is well? Navigate!
       // N.B. we don't call `router.commitLocation(next) here because we want to run `validateSearch` before committing
       return router.navigate({
-        ..._options,
+        ...options,
         replace,
         resetScroll,
         hashScrollIntoView,
         startTransition,
         viewTransition,
         ignoreBlocker,
-      } as any)
+      })
     }
   }
 
@@ -279,10 +281,14 @@ export function useLinkProps<
         return
       }
 
-      eventTarget.preloadTimeout = setTimeout(() => {
-        eventTarget.preloadTimeout = null
+      if (!preloadDelay) {
         doPreload()
-      }, preloadDelay)
+      } else {
+        eventTarget.preloadTimeout = setTimeout(() => {
+          eventTarget.preloadTimeout = null
+          doPreload()
+        }, preloadDelay)
+      }
     }
   }
 

package/src/route.tsx

@@ -25,11 +25,9 @@ import type {
   ResolveFullPath,
   ResolveId,
   ResolveParams,
-  RootRoute as RootRouteCore,
   RootRouteId,
   RootRouteOptions,
   RouteConstraints,
-  Route as RouteCore,
   RouteIds,
   RouteMask,
   RouteOptions,
@@ -150,62 +148,43 @@ export class RouteApi<
 }
 
 export class Route<
-    in out TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,
-    in out TPath extends RouteConstraints['TPath'] = '/',
-    in out TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<
-      TParentRoute,
-      TPath
-    >,
-    in out TCustomId extends RouteConstraints['TCustomId'] = string,
-    in out TId extends RouteConstraints['TId'] = ResolveId<
-      TParentRoute,
-      TCustomId,
-      TPath
-    >,
-    in out TSearchValidator = undefined,
-    in out TParams = ResolveParams<TPath>,
-    in out TRouterContext = AnyContext,
-    in out TRouteContextFn = AnyContext,
-    in out TBeforeLoadFn = AnyContext,
-    in out TLoaderDeps extends Record<string, any> = {},
-    in out TLoaderFn = undefined,
-    in out TChildren = unknown,
-    in out TFileRouteTypes = unknown,
-  >
-  extends BaseRoute<
+  in out TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,
+  in out TPath extends RouteConstraints['TPath'] = '/',
+  in out TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<
+    TParentRoute,
+    TPath
+  >,
+  in out TCustomId extends RouteConstraints['TCustomId'] = string,
+  in out TId extends RouteConstraints['TId'] = ResolveId<
     TParentRoute,
-    TPath,
-    TFullPath,
     TCustomId,
-    TId,
-    TSearchValidator,
-    TParams,
-    TRouterContext,
-    TRouteContextFn,
-    TBeforeLoadFn,
-    TLoaderDeps,
-    TLoaderFn,
-    TChildren,
-    TFileRouteTypes
-  >
-  implements
-    RouteCore<
-      TParentRoute,
-      TPath,
-      TFullPath,
-      TCustomId,
-      TId,
-      TSearchValidator,
-      TParams,
-      TRouterContext,
-      TRouteContextFn,
-      TBeforeLoadFn,
-      TLoaderDeps,
-      TLoaderFn,
-      TChildren,
-      TFileRouteTypes
-    >
-{
+    TPath
+  >,
+  in out TSearchValidator = undefined,
+  in out TParams = ResolveParams<TPath>,
+  in out TRouterContext = AnyContext,
+  in out TRouteContextFn = AnyContext,
+  in out TBeforeLoadFn = AnyContext,
+  in out TLoaderDeps extends Record<string, any> = {},
+  in out TLoaderFn = undefined,
+  in out TChildren = unknown,
+  in out TFileRouteTypes = unknown,
+> extends BaseRoute<
+  TParentRoute,
+  TPath,
+  TFullPath,
+  TCustomId,
+  TId,
+  TSearchValidator,
+  TParams,
+  TRouterContext,
+  TRouteContextFn,
+  TBeforeLoadFn,
+  TLoaderDeps,
+  TLoaderFn,
+  TChildren,
+  TFileRouteTypes
+> {
   /**
    * @deprecated Use the `createRoute` function instead.
    */
@@ -385,37 +364,24 @@ export function createRootRouteWithContext<TRouterContext extends {}>() {
 export const rootRouteWithContext = createRootRouteWithContext
 
 export class RootRoute<
-    in out TSearchValidator = undefined,
-    in out TRouterContext = {},
-    in out TRouteContextFn = AnyContext,
-    in out TBeforeLoadFn = AnyContext,
-    in out TLoaderDeps extends Record<string, any> = {},
-    in out TLoaderFn = undefined,
-    in out TChildren = unknown,
-    in out TFileRouteTypes = unknown,
-  >
-  extends BaseRootRoute<
-    TSearchValidator,
-    TRouterContext,
-    TRouteContextFn,
-    TBeforeLoadFn,
-    TLoaderDeps,
-    TLoaderFn,
-    TChildren,
-    TFileRouteTypes
-  >
-  implements
-    RootRouteCore<
-      TSearchValidator,
-      TRouterContext,
-      TRouteContextFn,
-      TBeforeLoadFn,
-      TLoaderDeps,
-      TLoaderFn,
-      TChildren,
-      TFileRouteTypes
-    >
-{
+  in out TSearchValidator = undefined,
+  in out TRouterContext = {},
+  in out TRouteContextFn = AnyContext,
+  in out TBeforeLoadFn = AnyContext,
+  in out TLoaderDeps extends Record<string, any> = {},
+  in out TLoaderFn = undefined,
+  in out TChildren = unknown,
+  in out TFileRouteTypes = unknown,
+> extends BaseRootRoute<
+  TSearchValidator,
+  TRouterContext,
+  TRouteContextFn,
+  TBeforeLoadFn,
+  TLoaderDeps,
+  TLoaderFn,
+  TChildren,
+  TFileRouteTypes
+> {
   /**
    * @deprecated `RootRoute` is now an internal implementation detail. Use `createRootRoute()` instead.
    */

package/src/router.ts

@@ -1,4 +1,5 @@
 import { RouterCore } from '@tanstack/router-core'
+import { createFileRoute, createLazyFileRoute } from './fileRoute'
 import type { RouterHistory } from '@tanstack/history'
 import type {
   AnyRoute,
@@ -105,3 +106,11 @@ export class Router<
     super(options)
   }
 }
+
+if (typeof globalThis !== 'undefined') {
+  ;(globalThis as any).createFileRoute = createFileRoute
+  ;(globalThis as any).createLazyFileRoute = createLazyFileRoute
+} else if (typeof window !== 'undefined') {
+  ;(window as any).createFileRoute = createFileRoute
+  ;(window as any).createFileRoute = createLazyFileRoute
+}

package/src/useBlocker.tsx

@@ -177,7 +177,10 @@ export function useBlocker(
         location: HistoryLocation,
       ): AnyShouldBlockFnLocation {
         const parsedLocation = router.parseLocation(undefined, location)
-        const matchedRoutes = router.getMatchedRoutes(parsedLocation)
+        const matchedRoutes = router.getMatchedRoutes(
+          parsedLocation.pathname,
+          undefined,
+        )
         if (matchedRoutes.foundRoute === undefined) {
           throw new Error(`No route found for location ${location.href}`)
         }

package/src/useNavigate.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useRouter } from './useRouter'
+import { useMatch } from './useMatch'
 import type {
   AnyRouter,
   FromPathOption,
@@ -14,15 +15,28 @@ export function useNavigate<
 >(_defaultOpts?: {
   from?: FromPathOption<TRouter, TDefaultFrom>
 }): UseNavigateResult<TDefaultFrom> {
-  const { navigate } = useRouter()
+  const { navigate, state } = 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,
+  })
 
   return React.useCallback(
     (options: NavigateOptions) => {
+      const from =
+        options.from ??
+        _defaultOpts?.from ??
+        state.matches[matchIndex]!.fullPath
+
       return navigate({
-        from: _defaultOpts?.from,
         ...options,
+        from,
       })
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [_defaultOpts?.from, navigate],
   ) as UseNavigateResult<TDefaultFrom>
 }
@@ -35,6 +49,7 @@ export function Navigate<
   const TMaskTo extends string = '',
 >(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {
   const router = useRouter()
+  const navigate = useNavigate()
 
   const previousPropsRef = React.useRef<NavigateOptions<
     TRouter,
@@ -45,11 +60,9 @@ export function Navigate<
   > | null>(null)
   React.useEffect(() => {
     if (previousPropsRef.current !== props) {
-      router.navigate({
-        ...props,
-      })
+      navigate(props)
       previousPropsRef.current = props
     }
-  }, [router, props])
+  }, [router, props, navigate])
   return null
 }