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.
 

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/react-router/tests/route.test.tsx

@@ -192,6 +192,27 @@ describe('onEnter event', () => {
 
     expect(fn).toHaveBeenCalledWith({ foo: 'bar' })
   })
+
+  it('should have location defined in router.load()', async () => {
+    const fn = vi.fn()
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => {
+        return <h1>Index</h1>
+      },
+      onEnter: (_, { location: { href, pathname } }) => {
+        fn({ href, pathname })
+      },
+    })
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({ routeTree })
+
+    await router.load()
+
+    expect(fn).toHaveBeenCalledWith({ href: '/', pathname: '/' })
+  })
 })
 
 describe('route.head', () => {

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<{}>>()
+    },
   })
 })
 

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

@@ -191,6 +191,27 @@ describe('onEnter event', () => {
 
     expect(fn).toHaveBeenCalledWith({ foo: 'bar' })
   })
+
+  it('should have location defined in router.load()', async () => {
+    const fn = vi.fn()
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => {
+        return <h1>Index</h1>
+      },
+      onEnter: (_, { location: { href, pathname } }) => {
+        fn({ href, pathname })
+      },
+    })
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({ routeTree })
+
+    await router.load()
+
+    expect(fn).toHaveBeenCalledWith({ href: '/', pathname: '/' })
+  })
 })
 
 describe('route.head', () => {