@tanstack/react-router 1.18.3 → 1.18.4

package/src/router.ts

@@ -14,11 +14,11 @@ import {
   AnySearchSchema,
   AnyRoute,
   AnyContext,
-  AnyPathParams,
   RouteMask,
   Route,
   LoaderFnContext,
   rootRouteId,
+  NotFoundRouteComponent,
 } from './route'
 import {
   FullSearchSchema,
@@ -67,10 +67,10 @@ import {
 import invariant from 'tiny-invariant'
 import { AnyRedirect, isRedirect } from './redirects'
 import { NotFoundError, isNotFound } from './not-found'
-import { ResolveRelativePath, ToOptions } from './link'
+import { NavigateOptions, ResolveRelativePath, ToOptions } from './link'
 import { NoInfer } from '@tanstack/react-store'
 import warning from 'tiny-warning'
-import { DeferredPromiseState } from '.'
+import { DeferredPromiseState } from './defer'
 
 //
 
@@ -85,7 +85,7 @@ export interface Register {
   // router: Router
 }
 
-export type AnyRouter = Router<AnyRoute, any>
+export type AnyRouter = Router<AnyRoute, any, any>
 
 export type RegisteredRouter = Register extends {
   router: infer TRouter extends AnyRouter
@@ -125,6 +125,7 @@ export interface RouterOptions<
   defaultStaleTime?: number
   defaultPreloadStaleTime?: number
   defaultPreloadGcTime?: number
+  notFoundMode?: 'root' | 'fuzzy'
   defaultGcTime?: number
   caseSensitive?: boolean
   routeTree?: TRouteTree
@@ -142,9 +143,9 @@ export interface RouterOptions<
    * See https://tanstack.com/router/v1/docs/guide/not-found-errors#migrating-from-notfoundroute for more info.
    */
   notFoundRoute?: AnyRoute
+  defaultNotFoundComponent?: NotFoundRouteComponent
   transformer?: RouterTransformer
   errorSerializer?: RouterErrorSerializer<TSerializedError>
-  globalNotFound?: RouteComponent
 }
 
 export interface RouterTransformer {
@@ -166,6 +167,7 @@ export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
   location: ParsedLocation<FullSearchSchema<TRouteTree>>
   resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>
   lastUpdated: number
+  statusCode: number
 }
 
 export type ListenerFn<TEvent extends RouterEvent> = (event: TEvent) => void
@@ -193,7 +195,7 @@ export interface DehydratedRouterState {
 
 export type DehydratedRouteMatch = Pick<
   RouteMatch,
-  'id' | 'status' | 'updatedAt' | 'notFoundError' | 'loaderData'
+  'id' | 'status' | 'updatedAt' | 'loaderData'
 >
 
 export interface DehydratedRouter {
@@ -380,6 +382,9 @@ export class Router<
               this.state.isTransitioning || this.state.isLoading
                 ? 'pending'
                 : 'idle',
+            cachedMatches: this.state.cachedMatches.filter(
+              (d) => !['redirected'].includes(d.status),
+            ),
           }
         },
       })
@@ -586,7 +591,7 @@ export class Router<
   matchRoutes = <TRouteTree extends AnyRoute>(
     pathname: string,
     locationSearch: AnySearchSchema,
-    opts?: { throwOnError?: boolean; debug?: boolean },
+    opts?: { preload?: boolean; throwOnError?: boolean; debug?: boolean },
   ): RouteMatch<TRouteTree>[] => {
     let routeParams: Record<string, string> = {}
 
@@ -611,7 +616,7 @@ export class Router<
     })
 
     let routeCursor: AnyRoute =
-      foundRoute || (this.routesById as any)['__root__']
+      foundRoute || (this.routesById as any)[rootRouteId]
 
     let matchedRoutes: AnyRoute[] = [routeCursor]
 
@@ -639,6 +644,23 @@ export class Router<
       if (routeCursor) matchedRoutes.unshift(routeCursor)
     }
 
+    const globalNotFoundRouteId = (() => {
+      if (!isGlobalNotFound) {
+        return undefined
+      }
+
+      if (this.options.notFoundMode !== 'root') {
+        for (let i = matchedRoutes.length - 1; i >= 0; i--) {
+          const route = matchedRoutes[i]!
+          if (route.children) {
+            return route.id
+          }
+        }
+      }
+
+      return rootRouteId
+    })()
+
     // Existing matches are matches that are already loaded along with
     // pending matches that are still loading
 
@@ -677,6 +699,7 @@ export class Router<
       // which is used to uniquely identify the route match in state
 
       const parentMatch = matches[index - 1]
+      const isLast = index === matchedRoutes.length - 1
 
       const [preMatchSearch, searchError]: [Record<string, any>, any] = (() => {
         // Validate the search params and stabilize them
@@ -737,7 +760,7 @@ export class Router<
       // Waste not, want not. If we already have a match for this route,
       // reuse it. This is important for layout routes, which might stick
       // around between navigation actions that only change leaf routes.
-      const existingMatch = getRouteMatch(this.state, matchId)
+      let existingMatch = getRouteMatch(this.state, matchId)
 
       const cause = this.state.matches.find((d) => d.id === matchId)
         ? 'stay'
@@ -747,10 +770,6 @@ export class Router<
         ? {
             ...existingMatch,
             cause,
-            notFoundError:
-              isGlobalNotFound && route.id === rootRouteId
-                ? { global: true }
-                : undefined,
             params: routeParams,
           }
         : {
@@ -775,15 +794,16 @@ export class Router<
             loaderDeps,
             invalid: false,
             preload: false,
-            notFoundError:
-              isGlobalNotFound && route.id === rootRouteId
-                ? { global: true }
-                : undefined,
             links: route.options.links?.(),
             scripts: route.options.scripts?.(),
             staticData: route.options.staticData || {},
           }
 
+      if (!opts?.preload) {
+        // If we have a global not found, mark the right match as global not found
+        match.globalNotFound = globalNotFoundRouteId === route.id
+      }
+
       // Regardless of whether we're reusing an existing match or creating
       // a new one, we need to update the match's search params
       match.search = replaceEqualDeep(match.search, preMatchSearch)
@@ -796,9 +816,7 @@ export class Router<
     return matches as any
   }
 
-  cancelMatch = (id: string) => {
-    getRouteMatch(this.state, id)?.abortController?.abort()
-  }
+  cancelMatch = (id: string) => {}
 
   cancelMatches = () => {
     this.state.pendingMatches?.forEach((match) => {
@@ -813,16 +831,23 @@ export class Router<
       } = {},
       matches?: AnyRouteMatch[],
     ): ParsedLocation => {
+      // if (dest.href) {
+      //   return {
+      //     pathname: dest.href,
+      //     search: {},
+      //     searchStr: '',
+      //     state: {},
+      //     hash: '',
+      //     href: dest.href,
+      //     unmaskOnReload: dest.unmaskOnReload,
+      //   }
+      // }
+
       const relevantMatches = this.state.pendingMatches || this.state.matches
       const fromSearch =
         relevantMatches[relevantMatches.length - 1]?.search ||
         this.latestLocation.search
 
-      let pathname = this.resolvePathWithBase(
-        dest.from ?? this.latestLocation.pathname,
-        `${dest.to ?? ''}`,
-      )
-
       const fromMatches = this.matchRoutes(
         this.latestLocation.pathname,
         fromSearch,
@@ -831,6 +856,15 @@ export class Router<
         fromMatches?.find((e) => e.routeId === d.routeId),
       )
 
+      const fromRoute = this.looseRoutesById[last(fromMatches)?.routeId]
+
+      let pathname = dest.to
+        ? this.resolvePathWithBase(
+            dest.from ?? this.latestLocation.pathname,
+            `${dest.to}`,
+          )
+        : fromRoute?.fullPath
+
       const prevParams = { ...last(fromMatches)?.params }
 
       let nextParams =
@@ -1002,7 +1036,7 @@ export class Router<
 
     // If the next urls are the same and we're not replacing,
     // do nothing
-    if (!isSameUrl || !next.replace) {
+    if (!isSameUrl) {
       let { maskedLocation, ...nextHistory } = next
 
       if (maskedLocation) {
@@ -1097,18 +1131,19 @@ export class Router<
 
   loadMatches = async ({
     checkLatest,
+    location,
     matches,
     preload,
   }: {
     checkLatest: () => Promise<void> | undefined
+    location: ParsedLocation
     matches: AnyRouteMatch[]
     preload?: boolean
   }): Promise<RouteMatch[]> => {
     let latestPromise
     let firstBadMatchIndex: number | undefined
 
-    const updateMatch = (match: AnyRouteMatch) => {
-      // const isPreload = this.state.cachedMatches.find((d) => d.id === match.id)
+    const updateMatch = (match: AnyRouteMatch, opts?: { remove?: boolean }) => {
       const isPending = this.state.pendingMatches?.find(
         (d) => d.id === match.id,
       )
@@ -1123,29 +1158,45 @@ export class Router<
 
       this.__store.setState((s) => ({
         ...s,
-        [matchesKey]: s[matchesKey]?.map((d) =>
-          d.id === match.id ? match : d,
-        ),
+        [matchesKey]: opts?.remove
+          ? s[matchesKey]?.filter((d) => d.id !== match.id)
+          : s[matchesKey]?.map((d) => (d.id === match.id ? match : d)),
       }))
     }
 
+    const handleMatchSpecialError = (match: AnyRouteMatch, err: any) => {
+      match = {
+        ...match,
+        status: isRedirect(err)
+          ? 'redirected'
+          : isNotFound(err)
+            ? 'notFound'
+            : 'error',
+        isFetching: false,
+        error: err,
+      }
+
+      updateMatch(match)
+
+      if (!err.routeId) {
+        err.routeId = match.routeId
+      }
+
+      throw err
+    }
+
     // Check each match middleware to see if the route can be accessed
     for (let [index, match] of matches.entries()) {
       const parentMatch = matches[index - 1]
       const route = this.looseRoutesById[match.routeId]!
       const abortController = new AbortController()
 
-      const handleError = (err: any, code: string) => {
+      const handleSerialError = (err: any, code: string) => {
         err.routerCode = code
         firstBadMatchIndex = firstBadMatchIndex ?? index
 
-        if (isRedirect(err)) {
-          throw err
-        }
-
-        if (isNotFound(err)) {
-          err.routeId = match.routeId
-          throw err
+        if (isRedirect(err) || isNotFound(err)) {
+          handleMatchSpecialError(match, err)
         }
 
         try {
@@ -1153,8 +1204,8 @@ export class Router<
         } catch (errorHandlerErr) {
           err = errorHandlerErr
 
-          if (isRedirect(errorHandlerErr)) {
-            throw errorHandlerErr
+          if (isRedirect(err) || isNotFound(err)) {
+            handleMatchSpecialError(match, errorHandlerErr)
           }
         }
 
@@ -1167,15 +1218,19 @@ export class Router<
         }
       }
 
-      try {
-        if (match.paramsError) {
-          handleError(match.paramsError, 'PARSE_PARAMS')
-        }
+      if (match.paramsError) {
+        handleSerialError(match.paramsError, 'PARSE_PARAMS')
+      }
 
-        if (match.searchError) {
-          handleError(match.searchError, 'VALIDATE_SEARCH')
-        }
+      if (match.searchError) {
+        handleSerialError(match.searchError, 'VALIDATE_SEARCH')
+      }
 
+      // if (match.globalNotFound && !preload) {
+      //   handleSerialError(notFound({ _global: true }), 'NOT_FOUND')
+      // }
+
+      try {
         const parentContext = parentMatch?.context ?? this.options.context ?? {}
 
         const pendingMs =
@@ -1192,16 +1247,15 @@ export class Router<
             params: match.params,
             preload: !!preload,
             context: parentContext,
-            location: this.state.location,
-            // TOOD: just expose state and router, etc
+            location,
             navigate: (opts) =>
               this.navigate({ ...opts, from: match.pathname } as any),
             buildLocation: this.buildLocation,
             cause: preload ? 'preload' : match.cause,
           })) ?? ({} as any)
 
-        if (isRedirect(beforeLoadContext)) {
-          throw beforeLoadContext
+        if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
+          handleSerialError(beforeLoadContext, 'BEFORE_LOAD')
         }
 
         const context = {
@@ -1217,7 +1271,7 @@ export class Router<
           pendingPromise,
         }
       } catch (err) {
-        handleError(err, 'BEFORE_LOAD')
+        handleSerialError(err, 'BEFORE_LOAD')
         break
       }
     }
@@ -1232,13 +1286,8 @@ export class Router<
           const route = this.looseRoutesById[match.routeId]!
 
           const handleError = (err: any) => {
-            if (isRedirect(err)) {
-              throw err
-            }
-
-            if (isNotFound(err)) {
-              err.routeId = match.routeId
-              throw err
+            if (isRedirect(err) || isNotFound(err)) {
+              handleMatchSpecialError(match, err)
             }
           }
 
@@ -1254,11 +1303,6 @@ export class Router<
             route.options.pendingMs ?? this.options.defaultPendingMs
           const pendingMinMs =
             route.options.pendingMinMs ?? this.options.defaultPendingMinMs
-          const shouldPending =
-            !preload &&
-            typeof pendingMs === 'number' &&
-            (route.options.pendingComponent ??
-              this.options.defaultPendingComponent)
 
           const loaderContext: LoaderFnContext = {
             params: match.params,
@@ -1267,72 +1311,69 @@ export class Router<
             parentMatchPromise,
             abortController: match.abortController,
             context: match.context,
-            location: this.state.location,
+            location,
             navigate: (opts) =>
               this.navigate({ ...opts, from: match.pathname } as any),
             cause: preload ? 'preload' : match.cause,
+            route,
           }
 
           const fetch = async () => {
-            if (match.isFetching) {
-              loadPromise = getRouteMatch(this.state, match.id)?.loadPromise
-            } else {
-              // If the user doesn't want the route to reload, just
-              // resolve with the existing loader data
-
-              if (match.fetchCount && match.status === 'success') {
-                resolve()
+            try {
+              if (match.isFetching) {
+                loadPromise = getRouteMatch(this.state, match.id)?.loadPromise
+              } else {
+                // If the user doesn't want the route to reload, just
+                // resolve with the existing loader data
+
+                // if (match.fetchCount && match.status === 'success') {
+                //   resolve()
+                // }
+
+                // Otherwise, load the route
+                matches[index] = match = {
+                  ...match,
+                  isFetching: true,
+                  fetchCount: match.fetchCount + 1,
+                }
+
+                const lazyPromise =
+                  route.lazyFn?.().then((lazyRoute) => {
+                    Object.assign(route.options, lazyRoute.options)
+                  }) || Promise.resolve()
+
+                // If for some reason lazy resolves more lazy components...
+                // We'll wait for that before pre attempt to preload any
+                // components themselves.
+                const componentsPromise = lazyPromise.then(() =>
+                  Promise.all(
+                    componentTypes.map(async (type) => {
+                      const component = route.options[type]
+
+                      if ((component as any)?.preload) {
+                        await (component as any).preload()
+                      }
+                    }),
+                  ),
+                )
+
+                // Kick off the loader!
+                const loaderPromise = route.options.loader?.(loaderContext)
+
+                loadPromise = Promise.all([
+                  componentsPromise,
+                  loaderPromise,
+                  lazyPromise,
+                ]).then((d) => d[1])
               }
 
-              // Otherwise, load the route
               matches[index] = match = {
                 ...match,
-                isFetching: true,
-                fetchCount: match.fetchCount + 1,
-              }
-
-              const lazyPromise =
-                route.lazyFn?.().then((lazyRoute) => {
-                  Object.assign(route.options, lazyRoute.options)
-                }) || Promise.resolve()
-
-              // If for some reason lazy resolves more lazy components...
-              // We'll wait for that before pre attempt to preload any
-              // components themselves.
-              const componentsPromise = lazyPromise.then(() =>
-                Promise.all(
-                  componentTypes.map(async (type) => {
-                    const component = route.options[type]
-
-                    if ((component as any)?.preload) {
-                      await (component as any).preload()
-                    }
-                  }),
-                ),
-              )
-
-              // wrap loader into an async function to be able to catch synchronous exceptions
-              async function loader() {
-                return await route.options.loader?.(loaderContext)
+                loadPromise,
               }
-              // Kick off the loader!
-              const loaderPromise = loader()
-
-              loadPromise = Promise.all([
-                componentsPromise,
-                loaderPromise,
-                lazyPromise,
-              ]).then((d) => d[1])
-            }
-
-            matches[index] = match = {
-              ...match,
-              loadPromise,
-            }
 
-            updateMatch(match)
+              updateMatch(match)
 
-            try {
               const loaderData = await loadPromise
               if ((latestPromise = checkLatest())) return await latestPromise
 
@@ -1367,6 +1408,7 @@ export class Router<
               }
             } catch (error) {
               if ((latestPromise = checkLatest())) return await latestPromise
+
               handleError(error)
 
               try {
@@ -1414,10 +1456,44 @@ export class Router<
               !!preload && !this.state.matches.find((d) => d.id === match.id),
           }
 
-          try {
-            if (match.status !== 'success') {
-              // If we need to potentially show the pending component,
-              // start a timer to show it after the pendingMs
+          // If the route is successful and still fresh, just resolve
+          if (
+            match.status === 'success' &&
+            (match.invalid || (shouldReload ?? age > staleAge))
+          ) {
+            ;(async () => {
+              try {
+                await fetch()
+              } catch (err) {
+                console.info('Background Fetching Error', err)
+
+                if (isRedirect(err)) {
+                  const isActive = (
+                    this.state.pendingMatches || this.state.matches
+                  ).find((d) => d.id === match.id)
+
+                  // Redirects should not be persisted
+                  handleError(err)
+
+                  // If the route is still active, redirect
+                  if (isActive) {
+                    this.handleRedirect(err)
+                  }
+                }
+              }
+            })()
+
+            return resolve()
+          }
+
+          const shouldPending =
+            !preload &&
+            typeof pendingMs === 'number' &&
+            (route.options.pendingComponent ??
+              this.options.defaultPendingComponent)
+
+          if (match.status !== 'success') {
+            try {
               if (shouldPending) {
                 match.pendingPromise?.then(async () => {
                   if ((latestPromise = checkLatest())) return latestPromise
@@ -1433,14 +1509,10 @@ export class Router<
                 })
               }
 
-              // Critical Fetching, we need to await
               await fetch()
-            } else if (match.invalid || (shouldReload ?? age > staleAge)) {
-              // Background Fetching, no need to wait
-              fetch()
+            } catch (err) {
+              reject(err)
             }
-          } catch (err) {
-            reject(err)
           }
 
           resolve()
@@ -1511,18 +1583,28 @@ export class Router<
       })
 
       try {
+        let redirected: AnyRedirect
+        let notFound: NotFoundError
+
         try {
           // Load the matches
           await this.loadMatches({
             matches: pendingMatches,
+            location: next,
             checkLatest: () => this.checkLatest(promise),
           })
         } catch (err) {
           if (isRedirect(err)) {
+            redirected = err
             this.handleRedirect(err)
           } else if (isNotFound(err)) {
+            notFound = err
             this.handleNotFound(pendingMatches, err)
           }
+
+          // Swallow all other errors that happen inside
+          // of loadMatches. These errors will be handled
+          // as state on each match.
         }
 
         // Only apply the latest transition
@@ -1552,6 +1634,12 @@ export class Router<
               ...s.cachedMatches,
               ...exitingMatches.filter((d) => d.status !== 'error'),
             ],
+            statusCode:
+              redirected?.code || notFound
+                ? 404
+                : s.matches.some((d) => d.status === 'error')
+                  ? 500
+                  : 200,
           }))
           this.cleanCache()
         })
@@ -1583,6 +1671,8 @@ export class Router<
           return latestPromise
         }
 
+        console.log('Load Error', err)
+
         reject(err)
       }
     })
@@ -1596,12 +1686,9 @@ export class Router<
     if (!err.href) {
       err.href = this.buildLocation(err as any).href
     }
-
-    if (isServer) {
-      throw err
+    if (!isServer) {
+      this.navigate({ ...(err as any), replace: true })
     }
-
-    this.navigate(err as any)
   }
 
   cleanCache = () => {
@@ -1630,13 +1717,19 @@ export class Router<
     })
   }
 
-  preloadRoute = async (
-    navigateOpts: ToOptions<TRouteTree> = this.state.location as any,
-  ) => {
-    let next = this.buildLocation(navigateOpts as any)
+  preloadRoute = async <
+    TFrom extends RoutePaths<TRouteTree> | string = string,
+    TTo extends string = '',
+    TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
+    TMaskTo extends string = '',
+  >(
+    opts: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+  ): Promise<AnyRouteMatch[] | undefined> => {
+    let next = this.buildLocation(opts as any)
 
     let matches = this.matchRoutes(next.pathname, next.search, {
       throwOnError: true,
+      preload: true,
     })
 
     const loadedMatchIds = Object.fromEntries(
@@ -1661,17 +1754,18 @@ export class Router<
     try {
       matches = await this.loadMatches({
         matches,
+        location: next,
         preload: true,
         checkLatest: () => undefined,
       })
 
       return matches
     } catch (err) {
-      // Preload errors are not fatal, but we should still log them
-      if (!isRedirect(err) && !isNotFound(err)) {
-        console.error(err)
+      if (isRedirect(err)) {
+        return await this.preloadRoute(err as any)
       }
-
+      // Preload errors are not fatal, but we should still log them
+      console.error(err)
       return undefined
     }
   }
@@ -1801,15 +1895,7 @@ export class Router<
     return {
       state: {
         dehydratedMatches: this.state.matches.map((d) => ({
-          ...pick(d, [
-            'id',
-            'status',
-            'updatedAt',
-            'loaderData',
-            // Not-founds that occur during SSR don't require the client to load data before
-            // triggering in order to prevent the flicker of the loading component
-            'notFoundError',
-          ]),
+          ...pick(d, ['id', 'status', 'updatedAt', 'loaderData']),
           // If an error occurs server-side during SSRing,
           // send a small subset of the error to the client
           error: d.error
@@ -1879,43 +1965,48 @@ export class Router<
     })
   }
 
-  // Finds a match that has a notFoundComponent
   handleNotFound = (matches: AnyRouteMatch[], err: NotFoundError) => {
     const matchesByRouteId = Object.fromEntries(
       matches.map((match) => [match.routeId, match]),
     ) as Record<string, AnyRouteMatch>
 
-    if (!err.global && err.routeId) {
-      // If the err contains a routeId, start searching up from that route
-      let currentRoute = this.looseRoutesById[err.routeId]
-
-      if (currentRoute) {
-        // Go up the tree until we find a route with a notFoundComponent
-        while (!currentRoute.options.notFoundComponent) {
-          currentRoute = currentRoute?.parentRoute
-
-          invariant(
-            currentRoute,
-            'Found invalid route tree while trying to find not-found handler.',
-          )
+    // Start at the route that errored or default to the root route
+    let routeCursor =
+      (err.global
+        ? this.looseRoutesById[rootRouteId]
+        : this.looseRoutesById[err.routeId]) ||
+      this.looseRoutesById[rootRouteId]!
+
+    // Go up the tree until we find a route with a notFoundComponent or we hit the root
+    while (
+      !routeCursor.options.notFoundComponent &&
+      !this.options.defaultNotFoundComponent &&
+      routeCursor.id !== rootRouteId
+    ) {
+      routeCursor = routeCursor?.parentRoute
 
-          if (currentRoute.id === rootRouteId) break
-        }
+      invariant(
+        routeCursor,
+        'Found invalid route tree while trying to find not-found handler.',
+      )
+    }
 
-        const match = matchesByRouteId[currentRoute.id]
-        invariant(match, 'Could not find match for route: ' + currentRoute.id)
-        match.notFoundError = err
+    let match = matchesByRouteId[routeCursor.id]
 
-        return
-      }
-    }
+    invariant(match, 'Could not find match for route: ' + routeCursor.id)
 
-    // Otherwise, just set the notFoundError on the root route
-    matchesByRouteId[rootRouteId]!.notFoundError = err
+    // Assign the error to the match
+    Object.assign(match, {
+      status: 'notFound',
+      error: err,
+      isFetching: false,
+    } as AnyRouteMatch)
   }
 
   hasNotFoundMatch = () => {
-    return this.__store.state.matches.some((d) => d.notFoundError)
+    return this.__store.state.matches.some(
+      (d) => d.status === 'notFound' || d.globalNotFound,
+    )
   }
 
   // resolveMatchPromise = (matchId: string, key: string, value: any) => {
@@ -1957,6 +2048,7 @@ export function getInitialRouterState(
     pendingMatches: [],
     cachedMatches: [],
     lastUpdated: 0,
+    statusCode: 200,
   }
 }