fix: state.renderedMatches

packages/react-router/src/react.tsx

@@ -600,16 +600,7 @@ function Matches() {
 
   const matchIds = useRouterState({
     select: (state) => {
-      const hasPendingComponent = state.pendingMatches.some((d) => {
-        const route = router.getRoute(d.routeId as any)
-        return !!route?.options.pendingComponent
-      })
-
-      if (hasPendingComponent) {
-        return state.pendingMatchIds
-      }
-
-      return state.matchIds
+      return state.renderedMatchIds
     },
   })
 
@@ -644,8 +635,8 @@ export function useMatches<T = RouteMatch[]>(opts?: {
 
   return useRouterState({
     select: (state) => {
-      const matches = state.matches.slice(
-        state.matches.findIndex((d) => d.id === matchIds[0]),
+      const matches = state.renderedMatches.slice(
+        state.renderedMatches.findIndex((d) => d.id === matchIds[0]),
       )
       return opts?.select ? opts.select(matches) : (matches as T)
     },
@@ -681,11 +672,9 @@ export function useMatch<
 
   const matchRouteId = useRouterState({
     select: (state) => {
-      const matches =
-        state.status === 'pending' ? state.pendingMatches : state.matches
       const match = opts?.from
-        ? matches.find((d) => d.routeId === opts?.from)
-        : matches.find((d) => d.id === nearestMatchId)
+        ? state.renderedMatches.find((d) => d.routeId === opts?.from)
+        : state.renderedMatches.find((d) => d.id === nearestMatchId)
 
       return match!.routeId
     },
@@ -706,11 +695,9 @@ export function useMatch<
 
   const matchSelection = useRouterState({
     select: (state) => {
-      const matches =
-        state.status === 'pending' ? state.pendingMatches : state.matches
       const match = opts?.from
-        ? matches.find((d) => d.routeId === opts?.from)
-        : matches.find((d) => d.id === nearestMatchId)
+        ? state.renderedMatches.find((d) => d.routeId === opts?.from)
+        : state.renderedMatches.find((d) => d.id === nearestMatchId)
 
       invariant(
         match,
@@ -832,7 +819,7 @@ export function useParams<
 ): TSelected {
   return useRouterState({
     select: (state: any) => {
-      const params = (last(state.matches) as any)?.params
+      const params = (last(state.renderedMatches) as any)?.params
       return opts?.select ? opts.select(params) : params
     },
   })

packages/router-core/src/router.ts

@@ -205,6 +205,8 @@ export interface RouterState<
   pendingMatchIds: string[]
   matches: RouteMatch<TRouteTree>[]
   pendingMatches: RouteMatch<TRouteTree>[]
+  renderedMatchIds: string[]
+  renderedMatches: RouteMatch<TRouteTree>[]
   location: ParsedLocation<FullSearchSchema<TRouteTree>>
   resolvedLocation: ParsedLocation<FullSearchSchema<TRouteTree>>
   lastUpdated: number
@@ -372,6 +374,21 @@ export class Router<
           })
         }
 
+        if (matchesByIdChanged || matchesChanged || pendingMatchesChanged) {
+          const hasPendingComponent = next.pendingMatches.some((d) => {
+            const route = this.getRoute(d.routeId as any)
+            return !!route?.options.pendingComponent
+          })
+
+          next.renderedMatchIds = hasPendingComponent
+            ? next.pendingMatchIds
+            : next.matchIds
+
+          next.renderedMatches = next.renderedMatchIds.map((id) => {
+            return next.matchesById[id] as any
+          })
+        }
+
         next.isFetching = [...next.matches, ...next.pendingMatches].some(
           (d) => d.isFetching,
         )
@@ -666,24 +683,10 @@ export class Router<
     prevMatchesById: Record<string, RouteMatch<TRouteTree>>,
     nextMatches: AnyRouteMatch[],
   ): Record<string, RouteMatch<TRouteTree>> => {
-    const nextMatchesById: any = {
+    return {
       ...prevMatchesById,
+      ...Object.fromEntries(nextMatches.map((match) => [match.id, match])),
     }
-
-    let hadNew = false
-
-    nextMatches.forEach((match) => {
-      if (!nextMatchesById[match.id]) {
-        hadNew = true
-        nextMatchesById[match.id] = match
-      }
-    })
-
-    if (!hadNew) {
-      return prevMatchesById
-    }
-
-    return nextMatchesById
   }
 
   getRoute = (id: string): Route => {
@@ -893,16 +896,20 @@ export class Router<
               ? route.options.validateSearch.parse
               : route.options.validateSearch
 
-          const routeSearch = validator?.(parentSearchInfo.search) ?? {}
+          let routeSearch = validator?.(parentSearchInfo.search) ?? {}
 
-          const search = {
+          let search = {
             ...parentSearchInfo.search,
             ...routeSearch,
           }
 
+          routeSearch = replaceEqualDeep(match.routeSearch, routeSearch)
+          search = replaceEqualDeep(match.search, search)
+
           return {
-            routeSearch: replaceEqualDeep(match.routeSearch, routeSearch),
-            search: replaceEqualDeep(match.search, search),
+            routeSearch,
+            search,
+            searchDidChange: match.routeSearch !== routeSearch,
           }
         } catch (err: any) {
           match.searchError = new SearchParamError(err.message, {
@@ -1722,7 +1729,6 @@ export class Router<
     location: BuildNextOptions & { replace?: boolean; resetScroll?: boolean },
   ) => {
     const next = this.buildNext(location)
-    const id = '' + Date.now() + Math.random()
 
     if (this.navigateTimeout) clearTimeout(this.navigateTimeout)
 
@@ -1742,10 +1748,7 @@ export class Router<
       next.hash ? `#${next.hash}` : ''
     }`
 
-    this.history[nextAction === 'push' ? 'push' : 'replace'](href, {
-      id,
-      ...next.state,
-    })
+    this.history[nextAction === 'push' ? 'push' : 'replace'](href, next.state)
 
     this.resetNextScroll = location.resetScroll ?? true
 
@@ -1863,6 +1866,8 @@ function getInitialRouterState(): RouterState<any> {
     pendingMatchIds: [],
     matches: [],
     pendingMatches: [],
+    renderedMatchIds: [],
+    renderedMatches: [],
     lastUpdated: Date.now(),
   }
 }