@tanstack/react-router 1.120.4 → 1.121.0-alpha.1

package/src/Matches.tsx

@@ -15,6 +15,7 @@ import type { ReactNode } from './route'
 import type {
   AnyRouter,
   DeepPartial,
+  Expand,
   MakeOptionalPathParams,
   MakeOptionalSearchParams,
   MakeRouteMatchUnion,
@@ -123,7 +124,9 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
       const TMaskTo extends string = '',
     >(
       opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
-    ): false | ResolveRoute<TRouter, TFrom, TTo>['types']['allParams'] => {
+    ):
+      | false
+      | Expand<ResolveRoute<TRouter, TFrom, TTo>['types']['allParams']> => {
       const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts
 
       return router.matchRoute(rest as any, {

package/src/RouterProvider.tsx

@@ -17,15 +17,17 @@ export function RouterContextProvider<
 }: RouterProps<TRouter, TDehydrated> & {
   children: React.ReactNode
 }) {
-  // Allow the router to update options on the router instance
-  router.update({
-    ...router.options,
-    ...rest,
-    context: {
-      ...router.options.context,
-      ...rest.context,
-    },
-  } as any)
+  if (Object.keys(rest).length > 0) {
+    // Allow the router to update options on the router instance
+    router.update({
+      ...router.options,
+      ...rest,
+      context: {
+        ...router.options.context,
+        ...rest.context,
+      },
+    } as any)
+  }
 
   const routerContext = getRouterContext()
 

package/src/Scripts.tsx

@@ -50,6 +50,7 @@ export const Scripts = () => {
         children,
       })),
     }),
+    structuralSharing: true as any,
   })
 
   const allScripts = [...scripts, ...assetScripts] as Array<RouterManagedTag>

package/src/fileRoute.ts

@@ -28,6 +28,7 @@ import type {
   RouteIds,
   RouteLoaderFn,
   UpdatableRouteOptions,
+  UseNavigateResult,
 } from '@tanstack/router-core'
 import type { UseLoaderDepsRoute } from './useLoaderDeps'
 import type { UseLoaderDataRoute } from './useLoaderData'
@@ -41,8 +42,13 @@ export function createFileRoute<
   TFullPath extends
     RouteConstraints['TFullPath'] = FileRoutesByPath[TFilePath]['fullPath'],
 >(
-  path: TFilePath,
+  path?: TFilePath,
 ): FileRoute<TFilePath, TParentRoute, TId, TPath, TFullPath>['createRoute'] {
+  if (typeof path === 'object') {
+    return new FileRoute<TFilePath, TParentRoute, TId, TPath, TFullPath>(path, {
+      silent: true,
+    }).createRoute(path) as any
+  }
   return new FileRoute<TFilePath, TParentRoute, TId, TPath, TFullPath>(path, {
     silent: true,
   }).createRoute
@@ -63,7 +69,7 @@ export class FileRoute<
   silent?: boolean
 
   constructor(
-    public path: TFilePath,
+    public path?: TFilePath,
     _opts?: { silent: boolean },
   ) {
     this.silent = _opts?.silent
@@ -159,6 +165,18 @@ export function FileRouteLoader<
   return (loaderFn) => loaderFn as any
 }
 
+declare module '@tanstack/router-core' {
+  export interface LazyRoute<in out TRoute extends AnyRoute> {
+    useMatch: UseMatchRoute<TRoute['id']>
+    useRouteContext: UseRouteContextRoute<TRoute['id']>
+    useSearch: UseSearchRoute<TRoute['id']>
+    useParams: UseParamsRoute<TRoute['id']>
+    useLoaderDeps: UseLoaderDepsRoute<TRoute['id']>
+    useLoaderData: UseLoaderDataRoute<TRoute['id']>
+    useNavigate: () => UseNavigateResult<TRoute['fullPath']>
+  }
+}
+
 export class LazyRoute<TRoute extends AnyRoute> {
   options: {
     id: string
@@ -214,7 +232,7 @@ export class LazyRoute<TRoute extends AnyRoute> {
     return useLoaderData({ ...opts, from: this.options.id } as any)
   }
 
-  useNavigate = () => {
+  useNavigate = (): UseNavigateResult<TRoute['fullPath']> => {
     const router = useRouter()
     return useNavigate({ from: router.routesById[this.options.id].fullPath })
   }
@@ -236,6 +254,10 @@ export function createLazyRoute<
 export function createLazyFileRoute<
   TFilePath extends keyof FileRoutesByPath,
   TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute'],
->(id: TFilePath) {
+>(id: TFilePath): (opts: LazyRouteOptions) => LazyRoute<TRoute> {
+  if (typeof id === 'object') {
+    return new LazyRoute<TRoute>(id) as any
+  }
+
   return (opts: LazyRouteOptions) => new LazyRoute<TRoute>({ id, ...opts })
 }

package/src/index.tsx

@@ -48,7 +48,6 @@ export type {
   DeferredPromiseState,
   DeferredPromise,
   ParsedLocation,
-  ParsePathParams,
   RemoveTrailingSlashes,
   RemoveLeadingSlashes,
   ActiveOptions,
@@ -57,6 +56,8 @@ export type {
   RootRouteId,
   AnyPathParams,
   ResolveParams,
+  ResolveOptionalParams,
+  ResolveRequiredParams,
   SearchSchemaInput,
   AnyContext,
   RouteContext,
@@ -78,8 +79,6 @@ export type {
   TrimPath,
   TrimPathLeft,
   TrimPathRight,
-  ParseSplatParams,
-  SplatParams,
   StringifyParamsFn,
   ParamsOptions,
   InferAllParams,
@@ -126,6 +125,7 @@ export type {
   RouteById,
   RootRouteOptions,
   SerializerExtensions,
+  CreateFileRoute,
 } from '@tanstack/router-core'
 
 export type * from './serializer'
@@ -237,6 +237,7 @@ export type {
   RouteConstraints,
   RouteMask,
   MatchRouteOptions,
+  CreateLazyFileRoute,
 } from '@tanstack/router-core'
 export type {
   UseLinkPropsOptions,

package/src/link.tsx

@@ -16,6 +16,7 @@ import {
   useLayoutEffect,
 } from './utils'
 
+import { useMatch } from './useMatch'
 import { useMatches } from './Matches'
 import type {
   AnyRouter,
@@ -105,11 +106,24 @@ 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 isRelativeFromPath = options.relative === 'path'
+
+  // when `from` is not supplied, use the nearest parent match's full path as the `from` location
+  // so relative routing works as expected. Try to stay out of rerenders as much as possible.
+  const nearestFrom = useMatch({
+    strict: false,
+    select: (match) => (isRelativeFromPath ? undefined : match.fullPath),
+  })
+
+  // When no from and relative is path, use the leaf match as the from location
+  // Avoid rerenders as much as possible.
+  const leafFrom = useMatches({
+    select: (matches) =>
+      isRelativeFromPath ? matches[matches.length - 1]!.fullPath : undefined,
   })
+
+  const from = options.from ?? (isRelativeFromPath ? leafFrom : nearestFrom)
+
   // Use it as the default `from` location
   const _options = React.useMemo(() => ({ ...options, from }), [options, from])
 

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,32 @@ 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 isRelativeFromPath = options.relative === 'path'
+
+      const from =
+        options.from ??
+        _defaultOpts?.from ??
+        (isRelativeFromPath
+          ? state.matches[state.matches.length - 1]!.fullPath
+          : state.matches[matchIndex]!.fullPath)
+
       return navigate({
-        from: _defaultOpts?.from,
         ...options,
+        from: from,
       })
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [_defaultOpts?.from, navigate],
   ) as UseNavigateResult<TDefaultFrom>
 }
@@ -35,6 +53,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 +64,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
 }