@tanstack/react-router 1.24.0 → 1.26.0

package/src/link.tsx

@@ -76,9 +76,11 @@ export type Last<T extends Array<any>> = T extends [...infer _, infer L]
   ? L
   : never
 
-export type RemoveTrailingSlashes<T> = T extends `${infer R}/`
-  ? RemoveTrailingSlashes<R>
-  : T
+export type RemoveTrailingSlashes<T> = T extends '/'
+  ? T
+  : T extends `${infer R}/`
+    ? RemoveTrailingSlashes<R>
+    : T
 
 export type RemoveLeadingSlashes<T> = T extends `/${infer R}`
   ? RemoveLeadingSlashes<R>
@@ -409,7 +411,7 @@ export function useLinkProps<
   // null for LinkUtils
 
   const dest = {
-    from: options.to ? matchPathname : undefined,
+    ...(options.to && { from: matchPathname }),
     ...options,
   }
 
@@ -548,6 +550,20 @@ export function useLinkProps<
   const resolvedInactiveProps: React.HTMLAttributes<HTMLAnchorElement> =
     isActive ? {} : functionalUpdate(inactiveProps, {})
 
+  const resolvedClassName = [
+    className,
+    resolvedActiveProps.className,
+    resolvedInactiveProps.className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const resolvedStyle = {
+    ...style,
+    ...resolvedActiveProps.style,
+    ...resolvedInactiveProps.style,
+  }
+
   return {
     ...resolvedActiveProps,
     ...resolvedInactiveProps,
@@ -563,26 +579,13 @@ export function useLinkProps<
     onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
     onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
     target,
-    style: {
-      ...style,
-      ...resolvedActiveProps.style,
-      ...resolvedInactiveProps.style,
-    },
-    className:
-      [
-        className,
-        resolvedActiveProps.className,
-        resolvedInactiveProps.className,
-      ]
-        .filter(Boolean)
-        .join(' ') || undefined,
-    ...(disabled
-      ? {
-          role: 'link',
-          'aria-disabled': true,
-        }
-      : undefined),
-    ['data-status']: isActive ? 'active' : undefined,
+    ...(Object.keys(resolvedStyle).length && { style: resolvedStyle }),
+    ...(resolvedClassName && { className: resolvedClassName }),
+    ...(disabled && {
+      role: 'link',
+      'aria-disabled': true,
+    }),
+    ...(isActive && { 'data-status': 'active' }),
   }
 }
 

package/src/route.ts

@@ -1256,12 +1256,14 @@ export function createRouteMask<
  */
 export type ErrorRouteProps = {
   error: unknown
-  info: { componentStack: string }
+  info?: { componentStack: string }
+  reset: () => void
 }
 
 export type ErrorComponentProps = {
   error: unknown
-  info: { componentStack: string }
+  info?: { componentStack: string }
+  reset: () => void
 }
 export type NotFoundRouteProps = {
   // TODO: Make sure this is `| null | undefined` (this is for global not-founds)

package/src/router.ts

@@ -40,9 +40,9 @@ import type {
   AnyContext,
   AnyRoute,
   AnySearchSchema,
+  ErrorRouteComponent,
   LoaderFnContext,
   NotFoundRouteComponent,
-  Route,
   RouteMask,
 } from './route'
 import type {
@@ -122,7 +122,7 @@ export interface RouterOptions<
   defaultPreload?: false | 'intent'
   defaultPreloadDelay?: number
   defaultComponent?: RouteComponent
-  defaultErrorComponent?: RouteComponent
+  defaultErrorComponent?: ErrorRouteComponent
   defaultPendingComponent?: RouteComponent
   defaultPendingMs?: number
   defaultPendingMinMs?: number
@@ -1545,9 +1545,10 @@ export class Router<
   }
 
   invalidate = () => {
-    const invalidate = (d: any) => ({
+    const invalidate = (d: RouteMatch<TRouteTree>) => ({
       ...d,
       invalid: true,
+      ...(d.status === 'error' ? ({ status: 'pending' } as const) : {}),
     })
 
     this.__store.setState((s) => ({
@@ -1557,7 +1558,7 @@ export class Router<
       pendingMatches: s.pendingMatches?.map(invalidate),
     }))
 
-    this.load()
+    return this.load()
   }
 
   load = async (): Promise<void> => {