@tanstack/react-router 1.44.5 → 1.45.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.44.5",
+  "version": "1.45.2",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/Match.tsx

@@ -41,8 +41,8 @@ export function Match({ matchId }: { matchId: string }) {
 
   const routeNotFoundComponent = route.isRoot
     ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
-      route.options.notFoundComponent ??
-      router.options.notFoundRoute?.options.component
+      (route.options.notFoundComponent ??
+      router.options.notFoundRoute?.options.component)
     : route.options.notFoundComponent
 
   const ResolvedSuspenseBoundary =

package/src/link.tsx

@@ -619,7 +619,7 @@ export function useLinkProps<
         ? s.location.hash === next.hash
         : true
       const searchTest =
-        activeOptions?.includeSearch ?? true
+        (activeOptions?.includeSearch ?? true)
           ? deepEqual(s.location.search, next.search, !activeOptions?.exact)
           : true
 
@@ -733,7 +733,7 @@ export function useLinkProps<
 
   // Get the active props
   const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> = isActive
-    ? functionalUpdate(activeProps as any, {}) ?? {}
+    ? (functionalUpdate(activeProps as any, {}) ?? {})
     : {}
 
   // Get the inactive props

package/src/path.ts

@@ -175,7 +175,7 @@ export function parsePathname(pathname?: string): Array<Segment> {
 
       return {
         type: 'pathname',
-        value: part,
+        value: decodeURIComponent(part),
       }
     }),
   )

package/src/router.ts

@@ -1855,7 +1855,8 @@ export class Router<
                 }
 
                 const beforeLoadContext = route.options.beforeLoad
-                  ? (await route.options.beforeLoad(beforeLoadFnContext)) ?? {}
+                  ? ((await route.options.beforeLoad(beforeLoadFnContext)) ??
+                    {})
                   : {}
 
                 checkLatest()
@@ -2068,12 +2069,12 @@ export class Router<
                 const age = Date.now() - match.updatedAt
 
                 const staleAge = preload
-                  ? route.options.preloadStaleTime ??
+                  ? (route.options.preloadStaleTime ??
                     this.options.defaultPreloadStaleTime ??
-                    30_000 // 30 seconds for preloads by default
-                  : route.options.staleTime ??
+                    30_000) // 30 seconds for preloads by default
+                  : (route.options.staleTime ??
                     this.options.defaultStaleTime ??
-                    0
+                    0)
 
                 const shouldReloadOption = route.options.shouldReload
 
@@ -2190,8 +2191,9 @@ export class Router<
           // otherwise, use the gcTime
           const gcTime =
             (d.preload
-              ? route.options.preloadGcTime ?? this.options.defaultPreloadGcTime
-              : route.options.gcTime ?? this.options.defaultGcTime) ??
+              ? (route.options.preloadGcTime ??
+                this.options.defaultPreloadGcTime)
+              : (route.options.gcTime ?? this.options.defaultGcTime)) ??
             5 * 60 * 1000
 
           return d.status !== 'error' && Date.now() - d.updatedAt < gcTime

package/src/useMatch.tsx

@@ -13,8 +13,10 @@ export type UseMatchOptions<
   TStrict extends boolean,
   TRouteMatch,
   TSelected,
+  TThrow extends boolean,
 > = StrictOrFrom<TFrom, TStrict> & {
   select?: (match: TRouteMatch) => TSelected
+  shouldThrow?: TThrow
 }
 
 export function useMatch<
@@ -23,7 +25,10 @@ export function useMatch<
   TStrict extends boolean = true,
   TRouteMatch = MakeRouteMatch<TRouteTree, TFrom, TStrict>,
   TSelected = TRouteMatch,
->(opts: UseMatchOptions<TFrom, TStrict, TRouteMatch, TSelected>): TSelected {
+  TThrow extends boolean = true,
+>(
+  opts: UseMatchOptions<TFrom, TStrict, TRouteMatch, TSelected, TThrow>,
+): TThrow extends true ? TSelected : TSelected | undefined {
   const nearestMatchId = React.useContext(matchContext)
 
   const matchSelection = useRouterState({
@@ -31,12 +36,15 @@ export function useMatch<
       const match = state.matches.find((d) =>
         opts.from ? opts.from === d.routeId : d.id === nearestMatchId,
       )
-
       invariant(
-        match,
+        !((opts.shouldThrow ?? true) && !match),
         `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
       )
 
+      if (match === undefined) {
+        return undefined
+      }
+
       return opts.select ? opts.select(match as any) : match
     },
   })