@tanstack/react-router 1.19.2 → 1.19.7

package/src/link.tsx

@@ -6,7 +6,6 @@ import { Trim } from './fileRoute'
 import { AnyRoute, ReactNode, RootSearchSchema } from './route'
 import { RouteByPath, RoutePaths, RoutePathsAutoComplete } from './routeInfo'
 import { RegisteredRouter } from './router'
-import { LinkProps, UseLinkPropsOptions } from './useNavigate'
 import {
   Expand,
   IsUnion,
@@ -580,32 +579,97 @@ export function useLinkProps<
   }
 }
 
-export interface LinkComponent<TProps extends Record<string, any> = {}> {
-  <
-    TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-    TFrom extends RoutePaths<TRouteTree> | string = string,
-    TTo extends string = '',
-    TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
-    TMaskTo extends string = '',
-  >(
-    props: LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
-      TProps &
-      React.RefAttributes<HTMLAnchorElement>,
-  ): ReactNode
+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 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>)
+}
+
+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> & {
+  // 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 const Link: LinkComponent = React.forwardRef((props: any, ref) => {
-  const { type, ...linkProps } = useLinkProps(props)
+type LinkComponent<TComp> = <
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = string,
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
+  TMaskTo extends string = '',
+>(
+  props: React.PropsWithoutRef<
+    LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
+      (TComp extends React.FC<infer TProps> | React.Component<infer TProps>
+        ? TProps
+        : TComp extends keyof JSX.IntrinsicElements
+          ? React.HTMLProps<TComp>
+          : never)
+  > &
+    React.RefAttributes<
+      TComp extends
+        | React.FC<{ ref: infer TRef }>
+        | React.Component<{ ref: infer TRef }>
+        ? TRef
+        : TComp extends keyof JSX.IntrinsicElements
+          ? React.ComponentRef<TComp>
+          : never
+    >,
+) => React.ReactElement
+
+export function createLink<const TComp>(Comp: TComp): LinkComponent<TComp> {
+  return React.forwardRef(function Link(props, ref) {
+    return <Link {...(props as any)} _asChild={Comp} ref={ref} />
+  }) as any
+}
+
+export const Link: LinkComponent<'a'> = React.forwardRef((props: any, ref) => {
+  const { _asChild, ...rest } = props
+  const { type, ...linkProps } = useLinkProps(rest as any)
 
   const children =
-    typeof props.children === 'function'
-      ? props.children({
+    typeof rest.children === 'function'
+      ? rest.children({
           isActive: (linkProps as any)['data-status'] === 'active',
         })
-      : props.children
+      : rest.children
 
-  return <a {...linkProps} ref={ref} children={children} />
-})
+  return React.createElement(
+    _asChild ? _asChild : 'a',
+    {
+      ...linkProps,
+      ref,
+    },
+    children as any,
+  )
+}) as any
 
 function isCtrlEvent(e: MouseEvent) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)

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/route.ts

@@ -86,8 +86,7 @@ export type RouteOptions<
   TRouterContext,
   TAllContext,
   TLoaderDeps,
-  TLoaderDataReturn,
-  TLoaderData
+  TLoaderDataReturn
 > &
   UpdatableRouteOptions<
     NoInfer<TAllParams>,
@@ -100,14 +99,11 @@ export type ParamsFallback<
   TParams,
 > = unknown extends TParams ? Record<ParsePathParams<TPath>, string> : TParams
 
-export type BaseRouteOptions<
+export type FileBaseRouteOptions<
   TParentRoute extends AnyRoute = AnyRoute,
-  TCustomId extends string = string,
   TPath extends string = string,
   TSearchSchemaInput extends Record<string, any> = {},
   TSearchSchema extends Record<string, any> = {},
-  TSearchSchemaUsed extends Record<string, any> = {},
-  TFullSearchSchemaInput extends Record<string, any> = TSearchSchemaUsed,
   TFullSearchSchema extends Record<string, any> = TSearchSchema,
   TParams extends AnyPathParams = {},
   TAllParams = ParamsFallback<TPath, TParams>,
@@ -117,11 +113,7 @@ export type BaseRouteOptions<
   TAllContext extends Record<string, any> = AnyContext,
   TLoaderDeps extends Record<string, any> = {},
   TLoaderDataReturn extends any = unknown,
-  TLoaderData extends any = [TLoaderDataReturn] extends [never]
-    ? undefined
-    : TLoaderDataReturn,
-> = RoutePathOptions<TCustomId, TPath> & {
-  getParentRoute: () => TParentRoute
+> = {
   validateSearch?: SearchSchemaValidator<TSearchSchemaInput, TSearchSchema>
   shouldReload?:
     | boolean
@@ -133,7 +125,6 @@ export type BaseRouteOptions<
           TRouteContext
         >,
       ) => any)
-} & {
   // This async function is called before a route is loaded.
   // If an error is thrown here, the route's loader will not be called.
   // If thrown during a navigation, the navigation will be cancelled and the error will be passed to the `onError` function.
@@ -145,7 +136,6 @@ export type BaseRouteOptions<
     TRouteContextReturn,
     TRouterContext
   >
-} & {
   loaderDeps?: (opts: { search: TFullSearchSchema }) => TLoaderDeps
   loader?: RouteLoaderFn<
     TAllParams,
@@ -155,22 +145,58 @@ export type BaseRouteOptions<
     TLoaderDataReturn
   >
 } & (
-    | {
-        // Both or none
-        parseParams?: (
-          rawParams: IsAny<TPath, any, Record<ParsePathParams<TPath>, string>>,
-        ) => TParams extends Record<ParsePathParams<TPath>, any>
-          ? TParams
-          : 'parseParams must return an object'
-        stringifyParams?: (
-          params: NoInfer<ParamsFallback<TPath, TParams>>,
-        ) => Record<ParsePathParams<TPath>, string>
-      }
-    | {
-        stringifyParams?: never
-        parseParams?: never
-      }
-  )
+  | {
+      // Both or none
+      parseParams?: (
+        rawParams: IsAny<TPath, any, Record<ParsePathParams<TPath>, string>>,
+      ) => TParams extends Record<ParsePathParams<TPath>, any>
+        ? TParams
+        : 'parseParams must return an object'
+      stringifyParams?: (
+        params: NoInfer<ParamsFallback<TPath, TParams>>,
+      ) => Record<ParsePathParams<TPath>, string>
+    }
+  | {
+      stringifyParams?: never
+      parseParams?: never
+    }
+)
+
+export type BaseRouteOptions<
+  TParentRoute extends AnyRoute = AnyRoute,
+  TCustomId extends string = string,
+  TPath extends string = string,
+  TSearchSchemaInput extends Record<string, any> = {},
+  TSearchSchema extends Record<string, any> = {},
+  TSearchSchemaUsed extends Record<string, any> = {},
+  TFullSearchSchemaInput extends Record<string, any> = TSearchSchemaUsed,
+  TFullSearchSchema extends Record<string, any> = TSearchSchema,
+  TParams extends AnyPathParams = {},
+  TAllParams = ParamsFallback<TPath, TParams>,
+  TRouteContextReturn extends RouteContext = RouteContext,
+  TRouteContext extends RouteContext = RouteContext,
+  TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
+  TAllContext extends Record<string, any> = AnyContext,
+  TLoaderDeps extends Record<string, any> = {},
+  TLoaderDataReturn extends any = unknown,
+> = RoutePathOptions<TCustomId, TPath> &
+  FileBaseRouteOptions<
+    TParentRoute,
+    TPath,
+    TSearchSchemaInput,
+    TSearchSchema,
+    TFullSearchSchema,
+    TParams,
+    TAllParams,
+    TRouteContextReturn,
+    TRouteContext,
+    TRouterContext,
+    TAllContext,
+    TLoaderDeps,
+    TLoaderDataReturn
+  > & {
+    getParentRoute: () => TParentRoute
+  }
 
 type BeforeLoadFn<
   TFullSearchSchema extends Record<string, any>,

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>)
-}