@tanstack/solid-router 2.0.0-alpha.6 → 2.0.0-alpha.7

package/src/Match.tsx

@@ -11,159 +11,194 @@ import {
 import { isServer } from '@tanstack/router-core/isServer'
 import { Dynamic } from '@solidjs/web'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
-import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 import { CatchNotFound } from './not-found'
-import { matchContext } from './matchContext'
+import { nearestMatchContext } from './matchContext'
 import { SafeFragment } from './SafeFragment'
 import { renderRouteNotFound } from './renderRouteNotFound'
 import { ScrollRestoration } from './scroll-restoration'
 import type { AnyRoute, RootRouteOptions } from '@tanstack/router-core'
 
-const MatchContext = matchContext as unknown as Solid.Component<{
+const NearestMatchContext = nearestMatchContext as unknown as Solid.Component<{
   value: any
   children?: any
 }>
 
 export const Match = (props: { matchId: string }) => {
   const router = useRouter()
-  const matchState = useRouterState({
-    select: (s) => {
-      const match = s.matches.find((d) => d.id === props.matchId)
-
-      // 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,
-        _displayPending: match._displayPending,
-      }
-    },
+  const match = Solid.createMemo(() => {
+    const id = props.matchId
+    if (!id) return undefined
+    return router.stores.activeMatchStoresById.get(id)?.state
   })
 
-  // If match doesn't exist yet, return null (component is being unmounted or not ready)
-  if (!Solid.untrack(matchState)) return null
+  const rawMatchState = Solid.createMemo(() => {
+    const currentMatch = match()
+    if (!currentMatch) {
+      return null
+    }
 
-  const route: () => AnyRoute = () => router.routesById[matchState()!.routeId]
+    const routeId = currentMatch.routeId as string
+    const parentRouteId = (router.routesById[routeId] as AnyRoute)?.parentRoute
+      ?.id
 
-  const resolvePendingComponent = () =>
-    route().options.pendingComponent ?? router.options.defaultPendingComponent
+    return {
+      matchId: currentMatch.id,
+      routeId,
+      ssr: currentMatch.ssr,
+      _displayPending: currentMatch._displayPending,
+      parentRouteId: parentRouteId as string | undefined,
+    }
+  })
 
-  const routeErrorComponent = () =>
-    route().options.errorComponent ?? router.options.defaultErrorComponent
+  const hasPendingMatch = Solid.createMemo(() => {
+    const currentRouteId = rawMatchState()?.routeId
+    return currentRouteId
+      ? Boolean(router.stores.pendingRouteIds.state[currentRouteId])
+      : false
+  })
+  const nearestMatch = {
+    matchId: () => rawMatchState()?.matchId,
+    routeId: () => rawMatchState()?.routeId,
+    match,
+    hasPending: hasPendingMatch,
+  }
 
-  const routeOnCatch = () =>
-    route().options.onCatch ?? router.options.defaultOnCatch
+  return (
+    <Solid.Show when={rawMatchState()}>
+      {(currentMatchState) => {
+        const route = Solid.createMemo(
+          () => router.routesById[currentMatchState().routeId] as AnyRoute,
+        )
 
-  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
+        const resolvePendingComponent = Solid.createMemo(
+          () =>
+            route().options.pendingComponent ??
+            router.options.defaultPendingComponent,
+        )
 
-  const resolvedNoSsr = Solid.createMemo(
-    () => matchState()!.ssr === false || matchState()!.ssr === 'data-only',
-  )
+        const routeErrorComponent = Solid.createMemo(
+          () =>
+            route().options.errorComponent ??
+            router.options.defaultErrorComponent,
+        )
 
-  const ResolvedSuspenseBoundary = () =>
-    resolvedNoSsr() ? SafeFragment : Solid.Loading
+        const routeOnCatch = Solid.createMemo(
+          () => route().options.onCatch ?? router.options.defaultOnCatch,
+        )
 
-  const ResolvedCatchBoundary = () =>
-    routeErrorComponent() ? CatchBoundary : SafeFragment
+        const routeNotFoundComponent = Solid.createMemo(() =>
+          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,
+        )
 
-  const ResolvedNotFoundBoundary = () =>
-    routeNotFoundComponent() ? CatchNotFound : SafeFragment
+        const resolvedNoSsr = Solid.createMemo(
+          () =>
+            currentMatchState().ssr === false ||
+            currentMatchState().ssr === 'data-only',
+        )
 
-  const resetKey = useRouterState({
-    select: (s) => s.loadedAt,
-  })
+        const ResolvedSuspenseBoundary = Solid.createMemo(() =>
+          resolvedNoSsr() ? SafeFragment : Solid.Loading,
+        )
 
-  const parentRouteId = useRouterState({
-    select: (s) => {
-      const index = s.matches.findIndex((d) => d.id === props.matchId)
-      return s.matches[index - 1]?.routeId as string
-    },
-  })
+        const ResolvedCatchBoundary = Solid.createMemo(() =>
+          routeErrorComponent() ? CatchBoundary : SafeFragment,
+        )
 
-  const ShellComponent = Solid.createMemo(() =>
-    route().isRoot
-      ? ((route().options as RootRouteOptions).shellComponent ?? SafeFragment)
-      : SafeFragment,
-  )
+        const ResolvedNotFoundBoundary = Solid.createMemo(() =>
+          routeNotFoundComponent() ? CatchNotFound : SafeFragment,
+        )
 
-  return (
-    <Dynamic component={ShellComponent()}>
-      <MatchContext value={() => props.matchId}>
-        <Dynamic
-          component={ResolvedSuspenseBoundary()}
-          fallback={
-            // Don't show fallback on server when using no-ssr mode to avoid hydration mismatch
-            (isServer ?? router.isServer) || resolvedNoSsr() ? undefined : (
-              <Dynamic component={resolvePendingComponent()} />
-            )
-          }
-        >
-          <Dynamic
-            component={ResolvedCatchBoundary()}
-            getResetKey={() => resetKey()}
-            errorComponent={routeErrorComponent() || ErrorComponent}
-            onCatch={(error: Error) => {
-              // Forward not found errors (we don't want to show the error component for these)
-              if (isNotFound(error)) throw error
-              warning(
-                false,
-                `Error in route match: ${Solid.untrack(matchState)!.routeId}`,
-              )
-              routeOnCatch()?.(error)
-            }}
-          >
-            <Dynamic
-              component={ResolvedNotFoundBoundary()}
-              fallback={(error: any) => {
-                // If the current not found handler doesn't exist or it has a
-                // route ID which doesn't match the current route, rethrow the error
-                if (
-                  !routeNotFoundComponent() ||
-                  (error.routeId && error.routeId !== matchState()!.routeId) ||
-                  (!error.routeId && !route().isRoot)
-                )
-                  throw error
+        const ShellComponent = Solid.createMemo(() =>
+          route().isRoot
+            ? ((route().options as RootRouteOptions).shellComponent ??
+              SafeFragment)
+            : SafeFragment,
+        )
 
-                return (
-                  <Dynamic component={routeNotFoundComponent()} {...error} />
-                )
-              }}
-            >
-              <Solid.Switch>
-                <Solid.Match when={resolvedNoSsr()}>
-                  <Solid.Show
-                    when={!(isServer ?? router.isServer)}
-                    fallback={<Dynamic component={resolvePendingComponent()} />}
+        return (
+          <Dynamic component={ShellComponent()}>
+            <NearestMatchContext value={nearestMatch}>
+              <Dynamic
+                component={ResolvedSuspenseBoundary()}
+                fallback={
+                  // Don't show fallback on server when using no-ssr mode to avoid hydration mismatch
+                  (isServer ?? router.isServer) &&
+                  resolvedNoSsr() ? undefined : (
+                    <Dynamic component={resolvePendingComponent()} />
+                  )
+                }
+              >
+                <Dynamic
+                  component={ResolvedCatchBoundary()}
+                  getResetKey={() => router.stores.loadedAt.state}
+                  errorComponent={routeErrorComponent() || ErrorComponent}
+                  onCatch={(error: Error) => {
+                    // Forward not found errors (we don't want to show the error component for these)
+                    if (isNotFound(error)) throw error
+                    warning(
+                      false,
+                      `Error in route match: ${currentMatchState().routeId}`,
+                    )
+                    routeOnCatch()?.(error)
+                  }}
+                >
+                  <Dynamic
+                    component={ResolvedNotFoundBoundary()}
+                    fallback={(error: any) => {
+                      // If the current not found handler doesn't exist or it has a
+                      // route ID which doesn't match the current route, rethrow the error
+                      if (
+                        !routeNotFoundComponent() ||
+                        (error.routeId &&
+                          error.routeId !== currentMatchState().routeId) ||
+                        (!error.routeId && !route().isRoot)
+                      )
+                        throw error
+
+                      return (
+                        <Dynamic
+                          component={routeNotFoundComponent()}
+                          {...error}
+                        />
+                      )
+                    }}
                   >
-                    <MatchInner matchId={props.matchId} />
-                  </Solid.Show>
-                </Solid.Match>
-                <Solid.Match when={!resolvedNoSsr()}>
-                  <MatchInner matchId={props.matchId} />
-                </Solid.Match>
-              </Solid.Switch>
-            </Dynamic>
+                    <Solid.Switch>
+                      <Solid.Match when={resolvedNoSsr()}>
+                        <Solid.Show
+                          when={!(isServer ?? router.isServer)}
+                          fallback={
+                            <Dynamic component={resolvePendingComponent()} />
+                          }
+                        >
+                          <MatchInner />
+                        </Solid.Show>
+                      </Solid.Match>
+                      <Solid.Match when={!resolvedNoSsr()}>
+                        <MatchInner />
+                      </Solid.Match>
+                    </Solid.Switch>
+                  </Dynamic>
+                </Dynamic>
+              </Dynamic>
+            </NearestMatchContext>
+
+            {currentMatchState().parentRouteId === rootRouteId ? (
+              <>
+                <OnRendered />
+                <ScrollRestoration />
+              </>
+            ) : null}
           </Dynamic>
-        </Dynamic>
-      </MatchContext>
-
-      {parentRouteId() === rootRouteId ? (
-        <>
-          <OnRendered />
-          <ScrollRestoration />
-        </>
-      ) : null}
-    </Dynamic>
+        )
+      }}
+    </Solid.Show>
   )
 }
 
@@ -185,265 +220,273 @@ const lastOnRenderedKey = new WeakMap<object, string>()
 function OnRendered() {
   const router = useRouter()
 
-  const location = useRouterState({
-    select: (s) => {
-      return s.resolvedLocation?.state.__TSR_key
-    },
-  })
+  const location = Solid.createMemo(
+    () => router.stores.resolvedLocation.state?.state.__TSR_key,
+  )
+  const locationState = Solid.createMemo(() => router.stores.location.state)
+  const resolvedLocationState = Solid.createMemo(
+    () => router.stores.resolvedLocation.state,
+  )
   Solid.createEffect(
-    () => [location()] as const,
-    ([location]) => {
+    () => [location(), locationState(), resolvedLocationState()] as const,
+    ([location, currentLocationState, currentResolvedLocationState]) => {
       if (!location) return
       if (lastOnRenderedKey.get(router) === location) return
       lastOnRenderedKey.set(router, location)
       router.emit({
         type: 'onRendered',
-        ...getLocationChangeInfo(router.state),
+        ...getLocationChangeInfo(
+          currentLocationState,
+          currentResolvedLocationState,
+        ),
       })
     },
   )
   return null
 }
 
-export const MatchInner = (props: { matchId: string }): any => {
+export const MatchInner = (): any => {
   const router = useRouter()
+  const match = Solid.useContext(nearestMatchContext).match
 
-  const matchState = useRouterState({
-    select: (s) => {
-      const match = s.matches.find((d) => d.id === props.matchId)
+  const rawMatchState = Solid.createMemo(() => {
+    const currentMatch = match()
+    if (!currentMatch) {
+      return null
+    }
 
-      // During navigation transitions, matches can be temporarily removed
-      if (!match) {
-        return null
-      }
+    const routeId = currentMatch.routeId as string
+
+    const remountFn =
+      (router.routesById[routeId] as AnyRoute).options.remountDeps ??
+      router.options.defaultRemountDeps
+    const remountDeps = remountFn?.({
+      routeId,
+      loaderDeps: currentMatch.loaderDeps,
+      params: currentMatch._strictParams,
+      search: currentMatch._strictSearch,
+    })
+    const key = remountDeps ? JSON.stringify(remountDeps) : undefined
+
+    return {
+      key,
+      routeId,
+      match: {
+        id: currentMatch.id,
+        status: currentMatch.status,
+        error: currentMatch.error,
+        _forcePending: currentMatch._forcePending ?? false,
+        _displayPending: currentMatch._displayPending ?? false,
+      },
+    }
+  })
 
-      const routeId = match.routeId as string
+  return (
+    <Solid.Show when={rawMatchState()}>
+      {(currentMatchState) => {
+        const route = Solid.createMemo(
+          () => router.routesById[currentMatchState().routeId]!,
+        )
 
-      const remountFn =
-        (router.routesById[routeId] as AnyRoute).options.remountDeps ??
-        router.options.defaultRemountDeps
-      const remountDeps = remountFn?.({
-        routeId,
-        loaderDeps: match.loaderDeps,
-        params: match._strictParams,
-        search: match._strictSearch,
-      })
-      const key = remountDeps ? JSON.stringify(remountDeps) : undefined
-
-      return {
-        key,
-        routeId,
-        match: {
-          id: match.id,
-          status: match.status,
-          error: match.error,
-          _forcePending: match._forcePending,
-          _displayPending: match._displayPending,
-        },
-      }
-    },
-  })
+        const currentMatch = Solid.createMemo(() => currentMatchState().match)
 
-  if (!Solid.untrack(matchState)) return null
+        const componentKey = Solid.createMemo(
+          () => currentMatchState().key ?? currentMatchState().match.id,
+        )
 
-  const route = () => router.routesById[matchState()!.routeId]!
+        const Comp = Solid.createMemo(
+          () => route().options.component ?? router.options.defaultComponent,
+        )
 
-  const match = () => matchState()!.match
+        const OutComponent = Solid.createMemo(() => {
+          const C = Comp()
+          return C || Outlet
+        })
 
-  const componentKey = () => matchState()!.key ?? matchState()!.match.id
+        const RenderOut = () => <Dynamic component={OutComponent()} />
 
-  const out = () => {
-    const currentRoute = Solid.untrack(route)
-    const Comp =
-      currentRoute.options.component ?? router.options.defaultComponent
-    if (Comp) {
-      return <Comp />
-    }
-    return <Outlet />
-  }
+        const keyedOut = () => (
+          <Solid.Show when={componentKey()} keyed>
+            {(_key) => <RenderOut />}
+          </Solid.Show>
+        )
 
-  const keyedOut = () => (
-    <Solid.Show when={componentKey()} keyed>
-      {(_key) => out()}
-    </Solid.Show>
-  )
+        return (
+          <Solid.Switch>
+            <Solid.Match when={currentMatch()._displayPending}>
+              {(_) => {
+                const displayPendingResult = Solid.createMemo(
+                  () =>
+                    router.getMatch(currentMatch().id)?._nonReactive
+                      .displayPendingPromise,
+                )
 
-  return (
-    <Solid.Switch>
-      <Solid.Match when={match()._displayPending}>
-        {(_) => {
-          const matchId = Solid.untrack(() => match().id)
-          const displayPendingResult = Solid.createMemo(
-            () => router.getMatch(matchId)?._nonReactive.displayPendingPromise,
-          )
-
-          return <>{displayPendingResult()}</>
-        }}
-      </Solid.Match>
-      <Solid.Match when={match()._forcePending}>
-        {(_) => {
-          const matchId = Solid.untrack(() => match().id)
-          const minPendingResult = Solid.createMemo(
-            () => router.getMatch(matchId)?._nonReactive.minPendingPromise,
-          )
-
-          return <>{minPendingResult()}</>
-        }}
-      </Solid.Match>
-      <Solid.Match when={match().status === 'pending'}>
-        {(_) => {
-          const currentMatch = Solid.untrack(match)
-          const currentRoute = Solid.untrack(route)
-          const pendingMinMs =
-            currentRoute.options.pendingMinMs ??
-            router.options.defaultPendingMinMs
-
-          if (pendingMinMs) {
-            const routerMatch = router.getMatch(currentMatch.id)
-            if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
-              // Create a promise that will resolve after the minPendingMs
-              if (!(isServer ?? router.isServer)) {
-                const minPendingPromise = createControlledPromise<void>()
-
-                routerMatch._nonReactive.minPendingPromise = minPendingPromise
-
-                setTimeout(() => {
-                  minPendingPromise.resolve()
-                  // We've handled the minPendingPromise, so we can delete it
-                  routerMatch._nonReactive.minPendingPromise = undefined
-                }, pendingMinMs)
-              }
-            }
-          }
+                return <>{displayPendingResult()}</>
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch()._forcePending}>
+              {(_) => {
+                const minPendingResult = Solid.createMemo(
+                  () =>
+                    router.getMatch(currentMatch().id)?._nonReactive
+                      .minPendingPromise,
+                )
 
-          const loaderResult = Solid.createMemo(async () => {
-            await new Promise((r) => setTimeout(r, 0))
-            return router.getMatch(currentMatch.id)?._nonReactive.loadPromise
-          })
-
-          const FallbackComponent =
-            currentRoute.options.pendingComponent ??
-            router.options.defaultPendingComponent
-
-          return (
-            <>
-              {FallbackComponent && pendingMinMs > 0 ? (
-                <Dynamic component={FallbackComponent} />
-              ) : null}
-              {loaderResult()}
-            </>
-          )
-        }}
-      </Solid.Match>
-      <Solid.Match when={match().status === 'notFound'}>
-        {(_) => {
-          const currentMatch = Solid.untrack(match)
-          const currentRoute = Solid.untrack(route)
-          const currentRouteId = Solid.untrack(() => matchState()!.routeId)
-          invariant(isNotFound(currentMatch.error), 'Expected a notFound error')
-
-          // Use Show with keyed to ensure re-render when routeId changes
-          return (
-            <Solid.Show when={currentRouteId} keyed>
-              {(_routeId) =>
-                renderRouteNotFound(router, currentRoute, currentMatch.error)
-              }
-            </Solid.Show>
-          )
-        }}
-      </Solid.Match>
-      <Solid.Match when={match().status === 'redirected'}>
-        {(_) => {
-          const matchId = Solid.untrack(() => match().id)
-          invariant(
-            isRedirect(Solid.untrack(match).error),
-            'Expected a redirect error',
-          )
-
-          const loaderResult = Solid.createMemo(async () => {
-            await new Promise((r) => setTimeout(r, 0))
-            return router.getMatch(matchId)?._nonReactive.loadPromise
-          })
-
-          return <>{loaderResult()}</>
-        }}
-      </Solid.Match>
-      <Solid.Match when={match().status === 'error'}>
-        {(_) => {
-          if (isServer ?? router.isServer) {
-            const currentMatch = Solid.untrack(match)
-            const RouteErrorComponent =
-              (Solid.untrack(route).options.errorComponent ??
-                router.options.defaultErrorComponent) ||
-              ErrorComponent
-
-            return (
-              <RouteErrorComponent
-                error={currentMatch.error}
-                info={{
-                  componentStack: '',
-                }}
-              />
-            )
-          }
+                return <>{minPendingResult()}</>
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'pending'}>
+              {(_) => {
+                const pendingMinMs = Solid.untrack(
+                  () =>
+                    route().options.pendingMinMs ??
+                    router.options.defaultPendingMinMs,
+                )
+
+                if (pendingMinMs) {
+                  const routerMatch = Solid.untrack(() =>
+                    router.getMatch(currentMatch().id),
+                  )
+                  if (
+                    routerMatch &&
+                    !routerMatch._nonReactive.minPendingPromise
+                  ) {
+                    // Create a promise that will resolve after the minPendingMs
+                    if (!(isServer ?? router.isServer)) {
+                      const minPendingPromise = createControlledPromise<void>()
+
+                      routerMatch._nonReactive.minPendingPromise =
+                        minPendingPromise
+
+                      setTimeout(() => {
+                        minPendingPromise.resolve()
+                        // We've handled the minPendingPromise, so we can delete it
+                        routerMatch._nonReactive.minPendingPromise = undefined
+                      }, pendingMinMs)
+                    }
+                  }
+                }
+
+                const loaderResult = Solid.createMemo(async () => {
+                  await new Promise((r) => setTimeout(r, 0))
+                  return router.getMatch(currentMatch().id)?._nonReactive
+                    .loadPromise
+                })
+
+                const FallbackComponent = Solid.untrack(
+                  () =>
+                    route().options.pendingComponent ??
+                    router.options.defaultPendingComponent,
+                )
+
+                return (
+                  <>
+                    {FallbackComponent && pendingMinMs > 0 ? (
+                      <Dynamic component={FallbackComponent} />
+                    ) : null}
+                    {loaderResult()}
+                  </>
+                )
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'notFound'}>
+              {(_) => {
+                const matchError = Solid.untrack(() => currentMatch().error)
+                invariant(isNotFound(matchError), 'Expected a notFound error')
+
+                // Use Show with keyed to ensure re-render when routeId changes
+                return (
+                  <Solid.Show when={currentMatchState().routeId} keyed>
+                    {(_routeId) =>
+                      Solid.untrack(() =>
+                        renderRouteNotFound(router, route(), matchError),
+                      )
+                    }
+                  </Solid.Show>
+                )
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'redirected'}>
+              {(_) => {
+                const matchError = Solid.untrack(() => currentMatch().error)
+                invariant(isRedirect(matchError), 'Expected a redirect error')
+
+                return null
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'error'}>
+              {(_) => {
+                const matchError = Solid.untrack(() => currentMatch().error)
+                if (isServer ?? router.isServer) {
+                  const RouteErrorComponent =
+                    (route().options.errorComponent ??
+                      router.options.defaultErrorComponent) ||
+                    ErrorComponent
+
+                  return (
+                    <RouteErrorComponent
+                      error={matchError}
+                      info={{
+                        componentStack: '',
+                      }}
+                    />
+                  )
+                }
 
-          throw Solid.untrack(match).error
-        }}
-      </Solid.Match>
-      <Solid.Match when={match().status === 'success'}>
-        {keyedOut()}
-      </Solid.Match>
-    </Solid.Switch>
+                throw matchError
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'success'}>
+              {keyedOut()}
+            </Solid.Match>
+          </Solid.Switch>
+        )
+      }}
+    </Solid.Show>
   )
 }
 
 export const Outlet = () => {
   const router = useRouter()
-  const matchId = Solid.useContext(matchContext)
-  const routeId = useRouterState({
-    select: (s) => s.matches.find((d) => d.id === matchId())?.routeId as string,
-  })
-
-  const route = () => router.routesById[routeId()]!
-
-  const parentGlobalNotFound = useRouterState({
-    select: (s) => {
-      const matches = s.matches
-      const parentMatch = matches.find((d) => d.id === matchId())
+  const nearestParentMatch = Solid.useContext(nearestMatchContext)
+  const parentMatch = nearestParentMatch.match
+  const routeId = nearestParentMatch.routeId
+  const route = Solid.createMemo(() =>
+    routeId() ? router.routesById[routeId()!] : undefined,
+  )
 
-      // During navigation transitions, parent match can be temporarily removed
-      // Return false to avoid errors - the component will handle this gracefully
-      if (!parentMatch) {
-        return false
-      }
+  const parentGlobalNotFound = Solid.createMemo(
+    () => parentMatch()?.globalNotFound ?? false,
+  )
 
-      return parentMatch.globalNotFound
-    },
+  const childMatchId = Solid.createMemo(() => {
+    const currentRouteId = routeId()
+    return currentRouteId
+      ? router.stores.childMatchIdByRouteId.state[currentRouteId]
+      : undefined
   })
 
-  const childMatchId = useRouterState({
-    select: (s) => {
-      const matches = s.matches
-      const index = matches.findIndex((d) => d.id === matchId())
-      const v = matches[index + 1]?.id
-      return v
-    },
+  const childRouteId = Solid.createMemo(() => {
+    const id = childMatchId()
+    if (!id) return undefined
+    return router.stores.activeMatchStoresById.get(id)?.state.routeId
   })
 
-  const childRouteId = useRouterState({
-    select: (s) => {
-      const matches = s.matches
-      const index = matches.findIndex((d) => d.id === matchId())
-      return matches[index + 1]?.routeId
-    },
+  const childRoute = Solid.createMemo(() => {
+    const id = childRouteId()
+    return id ? (router.routesById[id] as AnyRoute) : undefined
   })
 
-  const childMatchStatus = useRouterState({
-    select: (s) => {
-      const matches = s.matches
-      const index = matches.findIndex((d) => d.id === matchId())
-      return matches[index + 1]?.status
-    },
+  const childPendingComponent = Solid.createMemo(
+    () =>
+      childRoute()?.options.pendingComponent ??
+      router.options.defaultPendingComponent,
+  )
+
+  const childMatchStatus = Solid.createMemo(() => {
+    const id = childMatchId()
+    if (!id) return undefined
+    return router.stores.activeMatchStoresById.get(id)?.state.status
   })
 
   // Only show not-found if we're not in a redirected state
@@ -454,14 +497,17 @@ export const Outlet = () => {
     <Solid.Show
       when={!shouldShowNotFound() && childMatchId()}
       fallback={
-        <Solid.Show when={shouldShowNotFound()}>
-          {renderRouteNotFound(router, route(), undefined)}
+        <Solid.Show when={shouldShowNotFound() && route()}>
+          {(resolvedRoute) =>
+            Solid.untrack(() =>
+              renderRouteNotFound(router, resolvedRoute(), undefined),
+            )
+          }
         </Solid.Show>
       }
     >
-      {(matchIdAccessor) => {
-        // Use a memo to avoid stale accessor errors while keeping reactivity
-        const currentMatchId = Solid.createMemo(() => matchIdAccessor())
+      {(childMatchIdAccessor) => {
+        const currentMatchId = Solid.createMemo(() => childMatchIdAccessor())
 
         return (
           <Solid.Show
@@ -472,9 +518,9 @@ export const Outlet = () => {
               {(_routeId) => (
                 <Solid.Loading
                   fallback={
-                    <Dynamic
-                      component={router.options.defaultPendingComponent}
-                    />
+                    childPendingComponent() ? (
+                      <Dynamic component={childPendingComponent()} />
+                    ) : null
                   }
                 >
                   <Match matchId={currentMatchId()} />