feat: provide location in onEnter/onStay/onLeave hooks

Author: jprosevear

docs/router/framework/react/api/router/RouteOptionsType.md

@@ -245,19 +245,19 @@ type loaderDeps = (opts: { search: TFullSearchSchema }) => Record<string, any>
 
 ### `onEnter` property
 
-- Type: `(match: RouteMatch) => void`
+- Type: `(match: RouteMatch, { location }: { location: ParsedLocation<{}> }) => void`
 - Optional
 - A function that will be called when a route is matched and loaded after not being matched in the previous location.
 
 ### `onStay` property
 
-- Type: `(match: RouteMatch) => void`
+- Type: `(match: RouteMatch, { location }: { location: ParsedLocation<{}> }) => void`
 - Optional
 - A function that will be called when a route is matched and loaded after being matched in the previous location.
 
 ### `onLeave` property
 
-- Type: `(match: RouteMatch) => void`
+- Type: `(match: RouteMatch, { location }: { location: ParsedLocation<{}> }) => void`
 - Optional
 - A function that will be called when a route is no longer matched after being matched in the previous location.
 

examples/react/basic/src/main.tsx

@@ -14,6 +14,15 @@ import type { ErrorComponentProps } from '@tanstack/react-router'
 import './styles.css'
 
 const rootRoute = createRootRoute({
+  onEnter: (match, { location }) => {
+    console.log('Entering root route', match, location.pathname)
+  },
+  onStay: (match, { location }) => {
+    console.log('Staying root route', match, location.pathname)
+  },
+  onLeave: (match, { location }) => {
+    console.log('Leaving root route', match, location.pathname)
+  },
   component: RootComponent,
   notFoundComponent: () => {
     return (
@@ -190,6 +199,15 @@ function PathlessLayoutAComponent() {
 }
 
 const pathlessLayoutBRoute = createRoute({
+  onEnter: (match, { location }) => {
+    console.log('Entering route-b route', match, location.pathname)
+  },
+  onStay: (match, { location }) => {
+    console.log('Staying route-b route', match, location.pathname)
+  },
+  onLeave: (match, { location }) => {
+    console.log('Leaving route-b route', match, location.pathname)
+  },
   getParentRoute: () => nestedPathlessLayout2Route,
   path: '/route-b',
   component: PathlessLayoutBComponent,

packages/react-router/src/router.ts

@@ -2003,7 +2003,10 @@ export class Router<
                   ] as const
                 ).forEach(([matches, hook]) => {
                   matches.forEach((match) => {
-                    this.looseRoutesById[match.routeId]!.options[hook]?.(match)
+                    this.looseRoutesById[match.routeId]!.options[hook]?.(
+                      match,
+                      { location: next },
+                    )
                   })
                 })
               })

packages/react-router/tests/route.test-d.tsx

@@ -1321,9 +1321,18 @@ test('when creating a child route with context, search, params, loader, loaderDe
       invoicePage: deps.search.page,
     }),
     loader: () => ({ detailLoader: 'detailResult' }) as const,
-    onEnter: (match) => expectTypeOf(match).toMatchTypeOf<TExpectedMatch>(),
-    onStay: (match) => expectTypeOf(match).toMatchTypeOf<TExpectedMatch>(),
-    onLeave: (match) => expectTypeOf(match).toMatchTypeOf<TExpectedMatch>(),
+    onEnter: (match, { location }) => {
+      expectTypeOf(match).toMatchTypeOf<TExpectedMatch>()
+      expectTypeOf(location).toMatchTypeOf<ParsedLocation<{}>>()
+    },
+    onStay: (match, { location }) => {
+      expectTypeOf(match).toMatchTypeOf<TExpectedMatch>()
+      expectTypeOf(location).toMatchTypeOf<ParsedLocation<{}>>()
+    },
+    onLeave: (match, { location }) => {
+      expectTypeOf(match).toMatchTypeOf<TExpectedMatch>()
+      expectTypeOf(location).toMatchTypeOf<ParsedLocation<{}>>()
+    },
   })
 })
 

packages/router-core/src/route.ts

@@ -865,6 +865,7 @@ export interface UpdatableRouteOptions<
       >,
       TLoaderDeps
     >,
+    { location }: { location: ParsedLocation<{}> },
   ) => void
   onStay?: (
     match: RouteMatch<
@@ -881,6 +882,7 @@ export interface UpdatableRouteOptions<
       >,
       TLoaderDeps
     >,
+    { location }: { location: ParsedLocation<{}> },
   ) => void
   onLeave?: (
     match: RouteMatch<
@@ -897,6 +899,7 @@ export interface UpdatableRouteOptions<
       >,
       TLoaderDeps
     >,
+    { location }: { location: ParsedLocation<{}> },
   ) => void
   headers?: (ctx: {
     loaderData: ResolveLoaderData<TLoaderFn>

packages/solid-router/src/router.ts

@@ -791,7 +791,7 @@ export class Router<
     if (
       typeof window !== 'undefined' &&
       'CSS' in window &&
-      typeof window.CSS?.supports === 'function'
+      typeof window.CSS.supports === 'function'
     ) {
       this.isViewTransitionTypesSupported = window.CSS.supports(
         'selector(:active-view-transition-type(a)',
@@ -1977,7 +1977,10 @@ export class Router<
                   ] as const
                 ).forEach(([matches, hook]) => {
                   matches.forEach((match) => {
-                    this.looseRoutesById[match.routeId]!.options[hook]?.(match)
+                    this.looseRoutesById[match.routeId]!.options[hook]?.(
+                      match,
+                      { location: next },
+                    )
                   })
                 })
               })

packages/solid-router/tests/route.test-d.tsx

@@ -1286,9 +1286,18 @@ test('when creating a child route with context, search, params, loader, loaderDe
       invoicePage: deps.search.page,
     }),
     loader: () => ({ detailLoader: 'detailResult' }) as const,
-    onEnter: (match) => expectTypeOf(match).toMatchTypeOf<TExpectedMatch>(),
-    onStay: (match) => expectTypeOf(match).toMatchTypeOf<TExpectedMatch>(),
-    onLeave: (match) => expectTypeOf(match).toMatchTypeOf<TExpectedMatch>(),
+    onEnter: (match, { location }) => {
+      expectTypeOf(match).toMatchTypeOf<TExpectedMatch>()
+      expectTypeOf(location).toMatchTypeOf<ParsedLocation<{}>>()
+    },
+    onStay: (match, { location }) => {
+      expectTypeOf(match).toMatchTypeOf<TExpectedMatch>()
+      expectTypeOf(location).toMatchTypeOf<ParsedLocation<{}>>()
+    },
+    onLeave: (match, { location }) => {
+      expectTypeOf(match).toMatchTypeOf<TExpectedMatch>()
+      expectTypeOf(location).toMatchTypeOf<ParsedLocation<{}>>()
+    },
   })
 })