@tanstack/solid-router 1.134.11 → 1.134.12

package/src/Match.tsx

@@ -25,10 +25,12 @@ export const Match = (props: { matchId: string }) => {
     select: (s) => {
       const match = s.matches.find((d) => d.id === props.matchId)
 
-      invariant(
-        match,
-        `Could not find match for matchId "${props.matchId}". Please file an issue!`,
-      )
+      // During navigation transitions, matches can be temporarily removed
+      // Return null to avoid errors - the component will handle this gracefully
+      if (!match) {
+        return null
+      }
+
       return {
         routeId: match.routeId,
         ssr: match.ssr,
@@ -37,9 +39,12 @@ export const Match = (props: { matchId: string }) => {
     },
   })
 
-  const route: () => AnyRoute = () => router.routesById[matchState().routeId]
+  // If match doesn't exist yet, return null (component is being unmounted or not ready)
+  if (!matchState()) return null
 
-  const PendingComponent = () =>
+  const route: () => AnyRoute = () => router.routesById[matchState()!.routeId]
+
+  const resolvePendingComponent = () =>
     route().options.pendingComponent ?? router.options.defaultPendingComponent
 
   const routeErrorComponent = () =>
@@ -56,19 +61,9 @@ export const Match = (props: { matchId: string }) => {
       : route().options.notFoundComponent
 
   const resolvedNoSsr =
-    matchState().ssr === false || matchState().ssr === 'data-only'
-
-  const ResolvedSuspenseBoundary = () =>
-    // If we're on the root route, allow forcefully wrapping in suspense
-    (!route().isRoot ||
-      route().options.wrapInSuspense ||
-      resolvedNoSsr ||
-      matchState()._displayPending) &&
-    (route().options.wrapInSuspense ??
-      PendingComponent() ??
-      ((route().options.errorComponent as any)?.preload || resolvedNoSsr))
-      ? Solid.Suspense
-      : SafeFragment
+    matchState()!.ssr === false || matchState()!.ssr === 'data-only'
+
+  const ResolvedSuspenseBoundary = () => Solid.Suspense
 
   const ResolvedCatchBoundary = () =>
     routeErrorComponent() ? CatchBoundary : SafeFragment
@@ -99,7 +94,7 @@ export const Match = (props: { matchId: string }) => {
           fallback={
             // Don't show fallback on server when using no-ssr mode to avoid hydration mismatch
             router.isServer || resolvedNoSsr ? undefined : (
-              <Dynamic component={PendingComponent()} />
+              <Dynamic component={resolvePendingComponent()} />
             )
           }
         >
@@ -121,7 +116,7 @@ export const Match = (props: { matchId: string }) => {
                 // route ID which doesn't match the current route, rethrow the error
                 if (
                   !routeNotFoundComponent() ||
-                  (error.routeId && error.routeId !== matchState().routeId) ||
+                  (error.routeId && error.routeId !== matchState()!.routeId) ||
                   (!error.routeId && !route().isRoot)
                 )
                   throw error
@@ -135,7 +130,7 @@ export const Match = (props: { matchId: string }) => {
                 <Solid.Match when={resolvedNoSsr}>
                   <Solid.Show
                     when={!router.isServer}
-                    fallback={<Dynamic component={PendingComponent()} />}
+                    fallback={<Dynamic component={resolvePendingComponent()} />}
                   >
                     <MatchInner matchId={props.matchId} />
                   </Solid.Show>
@@ -190,7 +185,13 @@ export const MatchInner = (props: { matchId: string }): any => {
 
   const matchState = useRouterState({
     select: (s) => {
-      const match = s.matches.find((d) => d.id === props.matchId)!
+      const match = s.matches.find((d) => d.id === props.matchId)
+
+      // During navigation transitions, matches can be temporarily removed
+      if (!match) {
+        return null
+      }
+
       const routeId = match.routeId as string
 
       const remountFn =
@@ -218,11 +219,13 @@ export const MatchInner = (props: { matchId: string }): any => {
     },
   })
 
-  const route = () => router.routesById[matchState().routeId]!
+  if (!matchState()) return null
+
+  const route = () => router.routesById[matchState()!.routeId]!
 
-  const match = () => matchState().match
+  const match = () => matchState()!.match
 
-  const componentKey = () => matchState().key ?? matchState().match.id
+  const componentKey = () => matchState()!.key ?? matchState()!.match.id
 
   const out = () => {
     const Comp = route().options.component ?? router.options.defaultComponent
@@ -287,7 +290,18 @@ export const MatchInner = (props: { matchId: string }): any => {
             return router.getMatch(match().id)?._nonReactive.loadPromise
           })
 
-          return <>{loaderResult()}</>
+          const FallbackComponent =
+            route().options.pendingComponent ??
+            router.options.defaultPendingComponent
+
+          return (
+            <>
+              {FallbackComponent ? (
+                <Dynamic component={FallbackComponent} />
+              ) : null}
+              {loaderResult()}
+            </>
+          )
         }}
       </Solid.Match>
       <Solid.Match when={match().status === 'notFound'}>
@@ -350,10 +364,13 @@ export const Outlet = () => {
     select: (s) => {
       const matches = s.matches
       const parentMatch = matches.find((d) => d.id === matchId())
-      invariant(
-        parentMatch,
-        `Could not find parent match for matchId "${matchId()}"`,
-      )
+
+      // During navigation transitions, parent match can be temporarily removed
+      // Return false to avoid errors - the component will handle this gracefully
+      if (!parentMatch) {
+        return false
+      }
+
       return parentMatch.globalNotFound
     },
   })
@@ -388,20 +405,21 @@ export const Outlet = () => {
         </Solid.Show>
       }
     >
-      {(matchId) => {
-        // const nextMatch = <Match matchId={matchId()} />
+      {(matchIdAccessor) => {
+        // Use a memo to avoid stale accessor errors while keeping reactivity
+        const currentMatchId = Solid.createMemo(() => matchIdAccessor())
 
         return (
           <Solid.Show
-            when={matchId() === rootRouteId}
-            fallback={<Match matchId={matchId()} />}
+            when={currentMatchId() === rootRouteId}
+            fallback={<Match matchId={currentMatchId()} />}
           >
             <Solid.Suspense
               fallback={
                 <Dynamic component={router.options.defaultPendingComponent} />
               }
             >
-              <Match matchId={matchId()} />
+              <Match matchId={currentMatchId()} />
             </Solid.Suspense>
           </Solid.Show>
         )

package/src/Transitioner.tsx

@@ -20,6 +20,7 @@ export function Transitioner() {
   }
 
   const [isTransitioning, setIsTransitioning] = Solid.createSignal(false)
+
   // Track pending state changes
   const hasPendingMatches = useRouterState({
     select: (s) => s.matches.some((d) => d.status === 'pending'),
@@ -34,10 +35,15 @@ export function Transitioner() {
   const isPagePending = () => isLoading() || hasPendingMatches()
   const previousIsPagePending = usePrevious(isPagePending)
 
-  router.startTransition = async (fn: () => void | Promise<void>) => {
+  router.startTransition = (fn: () => void | Promise<void>) => {
     setIsTransitioning(true)
-    await fn()
-    setIsTransitioning(false)
+    Solid.startTransition(async () => {
+      try {
+        await fn()
+      } finally {
+        setIsTransitioning(false)
+      }
+    })
   }
 
   // Subscribe to location changes

package/src/useMatch.tsx

@@ -73,24 +73,48 @@ export function useMatch<
     opts.from ? dummyMatchContext : matchContext,
   )
 
-  const matchSelection = useRouterState({
+  // Create a signal to track error state separately from the match
+  const matchState: Solid.Accessor<{
+    match: any
+    shouldThrowError: boolean
+  }> = useRouterState({
     select: (state: any) => {
       const match = state.matches.find((d: any) =>
         opts.from ? opts.from === d.routeId : d.id === nearestMatchId(),
       )
 
-      invariant(
-        !((opts.shouldThrow ?? true) && !match),
-        `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
-      )
-
       if (match === undefined) {
-        return undefined
+        // During navigation transitions, check if the match exists in pendingMatches
+        const pendingMatch = state.pendingMatches?.find((d: any) =>
+          opts.from ? opts.from === d.routeId : d.id === nearestMatchId(),
+        )
+
+        // Determine if we should throw an error
+        const shouldThrowError =
+          !pendingMatch && !state.isTransitioning && (opts.shouldThrow ?? true)
+
+        return { match: undefined, shouldThrowError }
       }
 
-      return opts.select ? opts.select(match) : match
+      return {
+        match: opts.select ? opts.select(match) : match,
+        shouldThrowError: false,
+      }
     },
   } as any)
 
-  return matchSelection as any
+  // Use createEffect to throw errors outside the reactive selector context
+  // This allows error boundaries to properly catch the errors
+  Solid.createEffect(() => {
+    const state = matchState()
+    if (state.shouldThrowError) {
+      invariant(
+        false,
+        `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+      )
+    }
+  })
+
+  // Return an accessor that extracts just the match value
+  return Solid.createMemo(() => matchState().match) as any
 }