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

package/dist/source/Match.jsx

@@ -5,100 +5,116 @@ import { createControlledPromise, getLocationChangeInfo, isNotFound, isRedirect,
 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';
-const MatchContext = matchContext;
+const NearestMatchContext = nearestMatchContext;
 export const Match = (props) => {
     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 route = () => router.routesById[matchState().routeId];
-    const resolvePendingComponent = () => route().options.pendingComponent ?? router.options.defaultPendingComponent;
-    const routeErrorComponent = () => route().options.errorComponent ?? router.options.defaultErrorComponent;
-    const routeOnCatch = () => route().options.onCatch ?? router.options.defaultOnCatch;
-    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 resolvedNoSsr = Solid.createMemo(() => matchState().ssr === false || matchState().ssr === 'data-only');
-    const ResolvedSuspenseBoundary = () => resolvedNoSsr() ? SafeFragment : Solid.Loading;
-    const ResolvedCatchBoundary = () => routeErrorComponent() ? CatchBoundary : SafeFragment;
-    const ResolvedNotFoundBoundary = () => routeNotFoundComponent() ? CatchNotFound : SafeFragment;
-    const resetKey = useRouterState({
-        select: (s) => s.loadedAt,
+    const rawMatchState = Solid.createMemo(() => {
+        const currentMatch = match();
+        if (!currentMatch) {
+            return null;
+        }
+        const routeId = currentMatch.routeId;
+        const parentRouteId = router.routesById[routeId]?.parentRoute
+            ?.id;
+        return {
+            matchId: currentMatch.id,
+            routeId,
+            ssr: currentMatch.ssr,
+            _displayPending: currentMatch._displayPending,
+            parentRouteId: parentRouteId,
+        };
     });
-    const parentRouteId = useRouterState({
-        select: (s) => {
-            const index = s.matches.findIndex((d) => d.id === props.matchId);
-            return s.matches[index - 1]?.routeId;
-        },
+    const hasPendingMatch = Solid.createMemo(() => {
+        const currentRouteId = rawMatchState()?.routeId;
+        return currentRouteId
+            ? Boolean(router.stores.pendingRouteIds.state[currentRouteId])
+            : false;
     });
-    const ShellComponent = Solid.createMemo(() => route().isRoot
-        ? (route().options.shellComponent ?? SafeFragment)
-        : 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) => {
-            // 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) => {
-            // 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;
-            return (<Dynamic component={routeNotFoundComponent()} {...error}/>);
-        }}>
-              <Solid.Switch>
-                <Solid.Match when={resolvedNoSsr()}>
-                  <Solid.Show when={!(isServer ?? router.isServer)} fallback={<Dynamic component={resolvePendingComponent()}/>}>
-                    <MatchInner matchId={props.matchId}/>
-                  </Solid.Show>
-                </Solid.Match>
-                <Solid.Match when={!resolvedNoSsr()}>
-                  <MatchInner matchId={props.matchId}/>
-                </Solid.Match>
-              </Solid.Switch>
-            </Dynamic>
-          </Dynamic>
-        </Dynamic>
-      </MatchContext>
+    const nearestMatch = {
+        matchId: () => rawMatchState()?.matchId,
+        routeId: () => rawMatchState()?.routeId,
+        match,
+        hasPending: hasPendingMatch,
+    };
+    return (<Solid.Show when={rawMatchState()}>
+      {(currentMatchState) => {
+            const route = Solid.createMemo(() => router.routesById[currentMatchState().routeId]);
+            const resolvePendingComponent = Solid.createMemo(() => route().options.pendingComponent ??
+                router.options.defaultPendingComponent);
+            const routeErrorComponent = Solid.createMemo(() => route().options.errorComponent ??
+                router.options.defaultErrorComponent);
+            const routeOnCatch = Solid.createMemo(() => route().options.onCatch ?? router.options.defaultOnCatch);
+            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 resolvedNoSsr = Solid.createMemo(() => currentMatchState().ssr === false ||
+                currentMatchState().ssr === 'data-only');
+            const ResolvedSuspenseBoundary = Solid.createMemo(() => resolvedNoSsr() ? SafeFragment : Solid.Loading);
+            const ResolvedCatchBoundary = Solid.createMemo(() => routeErrorComponent() ? CatchBoundary : SafeFragment);
+            const ResolvedNotFoundBoundary = Solid.createMemo(() => routeNotFoundComponent() ? CatchNotFound : SafeFragment);
+            const ShellComponent = Solid.createMemo(() => route().isRoot
+                ? (route().options.shellComponent ??
+                    SafeFragment)
+                : SafeFragment);
+            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) => {
+                    // 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) => {
+                    // 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}/>);
+                }}>
+                    <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>
 
-      {parentRouteId() === rootRouteId ? (<>
-          <OnRendered />
-          <ScrollRestoration />
-        </>) : null}
-    </Dynamic>);
+            {currentMatchState().parentRouteId === rootRouteId ? (<>
+                <OnRendered />
+                <ScrollRestoration />
+              </>) : null}
+          </Dynamic>);
+        }}
+    </Solid.Show>);
 };
 // On Rendered can't happen above the root layout because it actually
 // renders a dummy dom element to track the rendered state of the app.
@@ -116,12 +132,10 @@ export const Match = (props) => {
 const lastOnRenderedKey = new WeakMap();
 function OnRendered() {
     const router = useRouter();
-    const location = useRouterState({
-        select: (s) => {
-            return s.resolvedLocation?.state.__TSR_key;
-        },
-    });
-    Solid.createEffect(() => [location()], ([location]) => {
+    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(), locationState(), resolvedLocationState()], ([location, currentLocationState, currentResolvedLocationState]) => {
         if (!location)
             return;
         if (lastOnRenderedKey.get(router) === location)
@@ -129,201 +143,183 @@ function OnRendered() {
         lastOnRenderedKey.set(router, location);
         router.emit({
             type: 'onRendered',
-            ...getLocationChangeInfo(router.state),
+            ...getLocationChangeInfo(currentLocationState, currentResolvedLocationState),
         });
     });
     return null;
 }
-export const MatchInner = (props) => {
+export const MatchInner = () => {
     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
-            if (!match) {
-                return null;
-            }
-            const routeId = match.routeId;
-            const remountFn = router.routesById[routeId].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,
-                },
-            };
-        },
-    });
-    if (!Solid.untrack(matchState))
-        return null;
-    const route = () => router.routesById[matchState().routeId];
-    const match = () => matchState().match;
-    const componentKey = () => matchState().key ?? matchState().match.id;
-    const out = () => {
-        const currentRoute = Solid.untrack(route);
-        const Comp = currentRoute.options.component ?? router.options.defaultComponent;
-        if (Comp) {
-            return <Comp />;
+    const match = Solid.useContext(nearestMatchContext).match;
+    const rawMatchState = Solid.createMemo(() => {
+        const currentMatch = match();
+        if (!currentMatch) {
+            return null;
         }
-        return <Outlet />;
-    };
-    const keyedOut = () => (<Solid.Show when={componentKey()} keyed>
-      {(_key) => out()}
-    </Solid.Show>);
-    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();
-                        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 = 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;
+        const routeId = currentMatch.routeId;
+        const remountFn = router.routesById[routeId].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,
+            },
+        };
+    });
+    return (<Solid.Show when={rawMatchState()}>
+      {(currentMatchState) => {
+            const route = Solid.createMemo(() => router.routesById[currentMatchState().routeId]);
+            const currentMatch = Solid.createMemo(() => currentMatchState().match);
+            const componentKey = Solid.createMemo(() => currentMatchState().key ?? currentMatchState().match.id);
+            const Comp = Solid.createMemo(() => route().options.component ?? router.options.defaultComponent);
+            const OutComponent = Solid.createMemo(() => {
+                const C = Comp();
+                return C || Outlet;
             });
-            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: '',
-                    }}/>);
-            }
-            throw Solid.untrack(match).error;
+            const RenderOut = () => <Dynamic component={OutComponent()}/>;
+            const keyedOut = () => (<Solid.Show when={componentKey()} keyed>
+            {(_key) => <RenderOut />}
+          </Solid.Show>);
+            return (<Solid.Switch>
+            <Solid.Match when={currentMatch()._displayPending}>
+              {(_) => {
+                    const displayPendingResult = Solid.createMemo(() => router.getMatch(currentMatch().id)?._nonReactive
+                        .displayPendingPromise);
+                    return <>{displayPendingResult()}</>;
+                }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch()._forcePending}>
+              {(_) => {
+                    const minPendingResult = Solid.createMemo(() => router.getMatch(currentMatch().id)?._nonReactive
+                        .minPendingPromise);
+                    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();
+                                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 matchError;
+                }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'success'}>
+              {keyedOut()}
+            </Solid.Match>
+          </Solid.Switch>);
         }}
-      </Solid.Match>
-      <Solid.Match when={match().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,
-    });
-    const route = () => router.routesById[routeId()];
-    const parentGlobalNotFound = useRouterState({
-        select: (s) => {
-            const matches = s.matches;
-            const parentMatch = matches.find((d) => d.id === 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;
-        },
+    const nearestParentMatch = Solid.useContext(nearestMatchContext);
+    const parentMatch = nearestParentMatch.match;
+    const routeId = nearestParentMatch.routeId;
+    const route = Solid.createMemo(() => routeId() ? router.routesById[routeId()] : undefined);
+    const parentGlobalNotFound = Solid.createMemo(() => parentMatch()?.globalNotFound ?? false);
+    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] : 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
     const shouldShowNotFound = () => childMatchStatus() !== 'redirected' && parentGlobalNotFound();
-    return (<Solid.Show when={!shouldShowNotFound() && childMatchId()} fallback={<Solid.Show when={shouldShowNotFound()}>
-          {renderRouteNotFound(router, route(), undefined)}
+    return (<Solid.Show when={!shouldShowNotFound() && childMatchId()} fallback={<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 when={routeId() === rootRouteId} fallback={<Match matchId={currentMatchId()}/>}>
             <Solid.Show when={childRouteId()} keyed>
-              {(_routeId) => (<Solid.Loading fallback={<Dynamic component={router.options.defaultPendingComponent}/>}>
+              {(_routeId) => (<Solid.Loading fallback={childPendingComponent() ? (<Dynamic component={childPendingComponent()}/>) : null}>
                   <Match matchId={currentMatchId()}/>
                 </Solid.Loading>)}
             </Solid.Show>