fix: add onBeforeNavigate event

TanStack · May 28, 2024 · 2b0135b · 2b0135b
1 parent 2f3b28c
commit 2b0135b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git a/packages/react-router/src/RouterProvider.tsx b/packages/react-router/src/RouterProvider.tsx
@@ -40,7 +40,9 @@ export type NavigateFn = <
   TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
   TMaskTo extends string = '',
 >(
-  opts: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
+  opts: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {
+    __isRedirect?: boolean
+  },
 ) => Promise<void>
 
 export type BuildLocationFn<TRouteTree extends AnyRoute> = <

diff --git a/packages/react-router/src/Transitioner.tsx b/packages/react-router/src/Transitioner.tsx
@@ -79,16 +79,11 @@ export function Transitioner() {
       const pathChanged = fromLocation.href !== toLocation.href
 
       router.emit({
-        type: 'onLoad',
+        type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches
         fromLocation,
         toLocation,
         pathChanged,
       })
-
-      // if (router.viewTransitionPromise) {
-      //   console.log('resolving view transition promise')
-      // }
-      // router.viewTransitionPromise?.resolve(true)
     }
   }, [previousIsLoading, router, routerState.isLoading])
 

diff --git a/packages/react-router/src/router.ts b/packages/react-router/src/router.ts
@@ -7,7 +7,6 @@ import { defaultParseSearch, defaultStringifySearch } from './searchParams'
 import {
   createControlledPromise,
   deepEqual,
-  escapeJSON,
   functionalUpdate,
   last,
   pick,
@@ -421,6 +420,12 @@ export const componentTypes = [
 ] as const
 
 export type RouterEvents = {
+  onBeforeNavigate: {
+    type: 'onBeforeNavigate'
+    fromLocation: ParsedLocation
+    toLocation: ParsedLocation
+    pathChanged: boolean
+  }
   onBeforeLoad: {
     type: 'onBeforeLoad'
     fromLocation: ParsedLocation
@@ -1374,7 +1379,7 @@ export class Router<
     })
   }
 
-  navigate: NavigateFn = ({ from, to, ...rest }) => {
+  navigate: NavigateFn = ({ from, to, __isRedirect, ...rest }) => {
     // If this link simply reloads the current route,
     // make sure it has a new key so it will trigger a data refresh
 
@@ -1423,13 +1428,6 @@ export class Router<
         // Cancel any pending matches
         this.cancelMatches()
 
-        this.emit({
-          type: 'onBeforeLoad',
-          fromLocation: prevLocation,
-          toLocation: next,
-          pathChanged: pathDidChange,
-        })
-
         let pendingMatches!: Array<AnyRouteMatch>
 
         this.__store.batch(() => {
@@ -1454,6 +1452,22 @@ export class Router<
           }))
         })
 
+        if (!this.state.redirect) {
+          this.emit({
+            type: 'onBeforeNavigate',
+            fromLocation: prevLocation,
+            toLocation: next,
+            pathChanged: pathDidChange,
+          })
+        }
+
+        this.emit({
+          type: 'onBeforeLoad',
+          fromLocation: prevLocation,
+          toLocation: next,
+          pathChanged: pathDidChange,
+        })
+
         await this.loadMatches({
           matches: pendingMatches,
           location: next,
@@ -1516,7 +1530,7 @@ export class Router<
         if (isResolvedRedirect(err)) {
           redirect = err
           if (!this.isServer) {
-            this.navigate({ ...err, replace: true })
+            this.navigate({ ...err, replace: true, __isRedirect: true })
             this.load()
           }
         } else if (isNotFound(err)) {