@tanstack/react-router 0.0.1-beta.277 → 0.0.1-beta.278

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.277",
+  "version": "0.0.1-beta.278",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -44,7 +44,7 @@
     "@tanstack/store": "^0.1.3",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.277"
+    "@tanstack/history": "0.0.1-beta.278"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -95,6 +95,8 @@ export function Match({ matchId }: { matchId: string }) {
   const PendingComponent = (route.options.pendingComponent ??
     router.options.defaultPendingComponent) as any
 
+  const pendingElement = PendingComponent ? <PendingComponent /> : null
+
   const routeErrorComponent =
     route.options.errorComponent ??
     router.options.defaultErrorComponent ??
@@ -115,7 +117,7 @@ export function Match({ matchId }: { matchId: string }) {
 
   return (
     <matchContext.Provider value={matchId}>
-      <ResolvedSuspenseBoundary fallback={PendingComponent}>
+      <ResolvedSuspenseBoundary fallback={pendingElement}>
         <ResolvedCatchBoundary
           getResetKey={() => router.state.resolvedLocation.state?.key}
           errorComponent={routeErrorComponent}
@@ -123,7 +125,7 @@ export function Match({ matchId }: { matchId: string }) {
             warning(false, `Error in route match: ${matchId}`)
           }}
         >
-          <MatchInner matchId={matchId!} pendingElement={PendingComponent} />
+          <MatchInner matchId={matchId!} pendingElement={pendingElement} />
         </ResolvedCatchBoundary>
       </ResolvedSuspenseBoundary>
     </matchContext.Provider>
@@ -161,7 +163,7 @@ function MatchInner({
 
   if (match.status === 'pending') {
     if (match.showPending) {
-      return pendingElement || null
+      return pendingElement
     }
     throw match.loadPromise
   }
@@ -218,6 +220,7 @@ export type UseMatchRouteOptions<
 export function useMatchRoute<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
 >() {
+  useRouterState({ select: (s) => [s.location, s.resolvedLocation] })
   const { matchRoute } = useRouter()
 
   return React.useCallback(

package/src/router.ts

@@ -989,11 +989,11 @@ export class Router<
     let firstBadMatchIndex: number | undefined
 
     const updateMatch = (match: AnyRouteMatch) => {
-      const isPreload = this.state.preloadMatches.find((d) => d.id === match.id)
+      // const isPreload = this.state.preloadMatches.find((d) => d.id === match.id)
       const isPending = this.state.pendingMatches?.find(
         (d) => d.id === match.id,
       )
-      const matchesKey = isPreload
+      const matchesKey = preload
         ? 'preloadMatches'
         : isPending
           ? 'pendingMatches'