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

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.279",
   "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.279"
   },
   "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

@@ -347,7 +347,7 @@ export class Router<
       trimmed: string
       parsed: ReturnType<typeof parsePathname>
       index: number
-      score: number[]
+      scores: number[]
     }[] = []
 
     ;(Object.values(this.routesById) as AnyRoute[]).forEach((d, i) => {
@@ -362,7 +362,11 @@ export class Router<
         parsed.shift()
       }
 
-      const score = parsed.map((d) => {
+      const scores = parsed.map((d) => {
+        if (d.value === '/') {
+          return 0.75
+        }
+
         if (d.type === 'param') {
           return 0.5
         }
@@ -374,41 +378,32 @@ export class Router<
         return 1
       })
 
-      scoredRoutes.push({ child: d, trimmed, parsed, index: i, score })
+      scoredRoutes.push({ child: d, trimmed, parsed, index: i, scores })
     })
 
     this.flatRoutes = scoredRoutes
       .sort((a, b) => {
-        let isIndex = a.trimmed === '/' ? 1 : b.trimmed === '/' ? -1 : 0
-
-        if (isIndex !== 0) return isIndex
-
-        const length = Math.min(a.score.length, b.score.length)
-
-        // Sort by length of score
-        if (a.score.length !== b.score.length) {
-          return b.score.length - a.score.length
-        }
+        const minLength = Math.min(a.scores.length, b.scores.length)
 
         // Sort by min available score
-        for (let i = 0; i < length; i++) {
-          if (a.score[i] !== b.score[i]) {
-            return b.score[i]! - a.score[i]!
+        for (let i = 0; i < minLength; i++) {
+          if (a.scores[i] !== b.scores[i]) {
+            return b.scores[i]! - a.scores[i]!
           }
         }
 
+        // Sort by length of score
+        if (a.scores.length !== b.scores.length) {
+          return b.scores.length - a.scores.length
+        }
+
         // Sort by min available parsed value
-        for (let i = 0; i < length; i++) {
+        for (let i = 0; i < minLength; i++) {
           if (a.parsed[i]!.value !== b.parsed[i]!.value) {
             return a.parsed[i]!.value! > b.parsed[i]!.value! ? 1 : -1
           }
         }
 
-        // Sort by length of trimmed full path
-        if (a.trimmed !== b.trimmed) {
-          return a.trimmed > b.trimmed ? 1 : -1
-        }
-
         // Sort by original index
         return a.index - b.index
       })
@@ -989,11 +984,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'