@tanstack/react-router 1.19.4 → 1.19.7

package/src/redirects.ts

@@ -1,10 +1,9 @@
+import { PickAsRequired } from '.'
 import { NavigateOptions } from './link'
 import { AnyRoute } from './route'
 import { RoutePaths } from './routeInfo'
 import { RegisteredRouter } from './router'
 
-// Detect if we're in the DOM
-
 export type AnyRedirect = Redirect<any, any, any, any, any>
 
 export type Redirect<
@@ -14,11 +13,27 @@ export type Redirect<
   TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
   TMaskTo extends string = '',
 > = {
+  /**
+   * @deprecated Use `statusCode` instead
+   **/
   code?: number
+  statusCode?: number
   throw?: any
-  href?: string
 } & NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>
 
+export type ResolvedRedirect<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
+  TMaskTo extends string = '',
+> = PickAsRequired<
+  Redirect<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+  'code' | 'statusCode'
+> & {
+  href: string
+}
+
 export function redirect<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RoutePaths<TRouteTree> = '/',
@@ -29,6 +44,7 @@ export function redirect<
   opts: Redirect<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
 ): Redirect<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> {
   ;(opts as any).isRedirect = true
+  opts.statusCode = opts.statusCode || opts.code || 301
   if (opts.throw ?? true) {
     throw opts
   }

package/src/router.ts

@@ -65,7 +65,7 @@ import {
   trimPathRight,
 } from './path'
 import invariant from 'tiny-invariant'
-import { AnyRedirect, isRedirect } from './redirects'
+import { AnyRedirect, ResolvedRedirect, isRedirect } from './redirects'
 import { NotFoundError, isNotFound } from './not-found'
 import { NavigateOptions, ResolveRelativePath, ToOptions } from './link'
 import { NoInfer } from '@tanstack/react-store'
@@ -168,6 +168,7 @@ export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
   resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>
   lastUpdated: number
   statusCode: number
+  redirect?: ResolvedRedirect
 }
 
 export type ListenerFn<TEvent extends RouterEvent> = (event: TEvent) => void
@@ -1476,9 +1477,14 @@ export class Router<
                   handleError(err)
 
                   // If the route is still active, redirect
-                  if (isActive) {
-                    this.handleRedirect(err)
-                  }
+                  // TODO: Do we really need this?
+                  invariant(
+                    false,
+                    'You need to redirect from a background fetch? This is not supported yet. File an issue.',
+                  )
+                  // if (isActive) {
+                  //   this.handleRedirect(err)
+                  // }
                 }
               }
             })()
@@ -1583,7 +1589,7 @@ export class Router<
       })
 
       try {
-        let redirected: AnyRedirect
+        let redirect: ResolvedRedirect
         let notFound: NotFoundError
 
         try {
@@ -1595,8 +1601,7 @@ export class Router<
           })
         } catch (err) {
           if (isRedirect(err)) {
-            redirected = err
-            this.handleRedirect(err)
+            redirect = this.resolveRedirect(err)
           } else if (isNotFound(err)) {
             notFound = err
             this.handleNotFound(pendingMatches, err)
@@ -1635,11 +1640,12 @@ export class Router<
               ...exitingMatches.filter((d) => d.status !== 'error'),
             ],
             statusCode:
-              redirected?.code || notFound
+              redirect?.statusCode || notFound
                 ? 404
                 : s.matches.some((d) => d.status === 'error')
                   ? 500
                   : 200,
+            redirect,
           }))
           this.cleanCache()
         })
@@ -1682,13 +1688,14 @@ export class Router<
     return this.latestLoadPromise
   }
 
-  handleRedirect = (err: AnyRedirect) => {
-    if (!err.href) {
-      err.href = this.buildLocation(err as any).href
-    }
-    if (!isServer) {
-      this.navigate({ ...(err as any), replace: true })
+  resolveRedirect = (err: AnyRedirect): ResolvedRedirect => {
+    let redirect = err as ResolvedRedirect
+
+    if (!redirect.href) {
+      redirect.href = this.buildLocation(redirect as any).href
     }
+
+    return redirect
   }
 
   cleanCache = () => {

package/src/useNavigate.tsx

@@ -73,43 +73,3 @@ export function Navigate<
 
   return null
 }
-
-export type UseLinkPropsOptions<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string = '',
-> = ActiveLinkOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
-  React.AnchorHTMLAttributes<HTMLAnchorElement>
-
-export type LinkProps<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string = '',
-> = ActiveLinkOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
-  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
-    // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
-    children?:
-      | React.ReactNode
-      | ((state: { isActive: boolean }) => React.ReactNode)
-  }
-
-export type ActiveLinkOptions<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TFrom extends RoutePaths<TRouteTree> | string = string,
-  TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-  TMaskTo extends string = '',
-> = LinkOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & {
-  // A function that returns additional props for the `active` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
-  activeProps?:
-    | React.AnchorHTMLAttributes<HTMLAnchorElement>
-    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
-  // A function that returns additional props for the `inactive` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
-  inactiveProps?:
-    | React.AnchorHTMLAttributes<HTMLAnchorElement>
-    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
-}