@tanstack/react-router 1.81.6 → 1.81.9

package/dist/esm/useMatch.js

@@ -1,9 +1,11 @@
 import * as React from "react";
 import invariant from "tiny-invariant";
 import { useRouterState } from "./useRouterState.js";
-import { matchContext } from "./matchContext.js";
+import { dummyMatchContext, matchContext } from "./matchContext.js";
 function useMatch(opts) {
-  const nearestMatchId = React.useContext(matchContext);
+  const nearestMatchId = React.useContext(
+    opts.from ? dummyMatchContext : matchContext
+  );
   const matchSelection = useRouterState({
     select: (state) => {
       const match = state.matches.find(

package/dist/esm/useMatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMatch.js","sources":["../../src/useMatch.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport { useRouterState } from './useRouterState'\nimport { matchContext } from './matchContext'\nimport type {\n  StructuralSharingOption,\n  ValidateSelected,\n} from './structuralSharing'\nimport type { AnyRouter, RegisteredRouter } from './router'\nimport type { MakeRouteMatch } from './Matches'\nimport type { StrictOrFrom, ThrowOrOptional } from './utils'\n\nexport interface UseMatchBaseOptions<\n  TRouter extends AnyRouter,\n  TFrom,\n  TStrict extends boolean,\n  TThrow,\n  TSelected,\n  TStructuralSharing extends boolean,\n> {\n  select?: (\n    match: MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>,\n  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>\n  shouldThrow?: TThrow\n}\n\nexport type UseMatchRoute<out TFrom> = <\n  TRouter extends AnyRouter = RegisteredRouter,\n  TSelected = unknown,\n  TStructuralSharing extends boolean = boolean,\n>(\n  opts?: UseMatchBaseOptions<\n    TRouter,\n    TFrom,\n    true,\n    true,\n    TSelected,\n    TStructuralSharing\n  > &\n    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n) => UseMatchResult<TRouter, TFrom, true, TSelected>\n\nexport type UseMatchOptions<\n  TRouter extends AnyRouter,\n  TFrom extends string | undefined,\n  TStrict extends boolean,\n  TSelected,\n  TThrow extends boolean,\n  TStructuralSharing extends boolean,\n> = StrictOrFrom<TRouter, TFrom, TStrict> &\n  UseMatchBaseOptions<\n    TRouter,\n    TFrom,\n    TStrict,\n    TThrow,\n    TSelected,\n    TStructuralSharing\n  > &\n  StructuralSharingOption<TRouter, TSelected, TStructuralSharing>\n\nexport type UseMatchResult<\n  TRouter extends AnyRouter,\n  TFrom,\n  TStrict extends boolean,\n  TSelected,\n> = unknown extends TSelected\n  ? MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>\n  : TSelected\n\nexport function useMatch<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends string | undefined = undefined,\n  TStrict extends boolean = true,\n  TThrow extends boolean = true,\n  TSelected = unknown,\n  TStructuralSharing extends boolean = boolean,\n>(\n  opts: UseMatchOptions<\n    TRouter,\n    TFrom,\n    TStrict,\n    TSelected,\n    TThrow,\n    TStructuralSharing\n  >,\n): ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow> {\n  const nearestMatchId = React.useContext(matchContext)\n\n  const matchSelection = useRouterState({\n    select: (state: any) => {\n      const match = state.matches.find((d: any) =>\n        opts.from ? opts.from === d.routeId : d.id === nearestMatchId,\n      )\n      invariant(\n        !((opts.shouldThrow ?? true) && !match),\n        `Could not find ${opts.from ? `an active match from \"${opts.from}\"` : 'a nearest match!'}`,\n      )\n\n      if (match === undefined) {\n        return undefined\n      }\n\n      return opts.select ? opts.select(match) : match\n    },\n    structuralSharing: opts.structuralSharing,\n  } as any)\n\n  return matchSelection as any\n}\n"],"names":[],"mappings":";;;;AAqEO,SAAS,SAQd,MAQ6E;AACvE,QAAA,iBAAiB,MAAM,WAAW,YAAY;AAEpD,QAAM,iBAAiB,eAAe;AAAA,IACpC,QAAQ,CAAC,UAAe;AAChB,YAAA,QAAQ,MAAM,QAAQ;AAAA,QAAK,CAAC,MAChC,KAAK,OAAO,KAAK,SAAS,EAAE,UAAU,EAAE,OAAO;AAAA,MACjD;AACA;AAAA,QACE,GAAG,KAAK,eAAe,SAAS,CAAC;AAAA,QACjC,kBAAkB,KAAK,OAAO,yBAAyB,KAAK,IAAI,MAAM,kBAAkB;AAAA,MAC1F;AAEA,UAAI,UAAU,QAAW;AAChB,eAAA;AAAA,MAAA;AAGT,aAAO,KAAK,SAAS,KAAK,OAAO,KAAK,IAAI;AAAA,IAC5C;AAAA,IACA,mBAAmB,KAAK;AAAA,EAAA,CAClB;AAED,SAAA;AACT;"}
+{"version":3,"file":"useMatch.js","sources":["../../src/useMatch.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport { useRouterState } from './useRouterState'\nimport { dummyMatchContext, matchContext } from './matchContext'\nimport type {\n  StructuralSharingOption,\n  ValidateSelected,\n} from './structuralSharing'\nimport type { AnyRouter, RegisteredRouter } from './router'\nimport type { MakeRouteMatch } from './Matches'\nimport type { StrictOrFrom, ThrowOrOptional } from './utils'\n\nexport interface UseMatchBaseOptions<\n  TRouter extends AnyRouter,\n  TFrom,\n  TStrict extends boolean,\n  TThrow,\n  TSelected,\n  TStructuralSharing extends boolean,\n> {\n  select?: (\n    match: MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>,\n  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>\n  shouldThrow?: TThrow\n}\n\nexport type UseMatchRoute<out TFrom> = <\n  TRouter extends AnyRouter = RegisteredRouter,\n  TSelected = unknown,\n  TStructuralSharing extends boolean = boolean,\n>(\n  opts?: UseMatchBaseOptions<\n    TRouter,\n    TFrom,\n    true,\n    true,\n    TSelected,\n    TStructuralSharing\n  > &\n    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n) => UseMatchResult<TRouter, TFrom, true, TSelected>\n\nexport type UseMatchOptions<\n  TRouter extends AnyRouter,\n  TFrom extends string | undefined,\n  TStrict extends boolean,\n  TSelected,\n  TThrow extends boolean,\n  TStructuralSharing extends boolean,\n> = StrictOrFrom<TRouter, TFrom, TStrict> &\n  UseMatchBaseOptions<\n    TRouter,\n    TFrom,\n    TStrict,\n    TThrow,\n    TSelected,\n    TStructuralSharing\n  > &\n  StructuralSharingOption<TRouter, TSelected, TStructuralSharing>\n\nexport type UseMatchResult<\n  TRouter extends AnyRouter,\n  TFrom,\n  TStrict extends boolean,\n  TSelected,\n> = unknown extends TSelected\n  ? MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>\n  : TSelected\n\nexport function useMatch<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TFrom extends string | undefined = undefined,\n  TStrict extends boolean = true,\n  TThrow extends boolean = true,\n  TSelected = unknown,\n  TStructuralSharing extends boolean = boolean,\n>(\n  opts: UseMatchOptions<\n    TRouter,\n    TFrom,\n    TStrict,\n    TSelected,\n    TThrow,\n    TStructuralSharing\n  >,\n): ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow> {\n  const nearestMatchId = React.useContext(\n    opts.from ? dummyMatchContext : matchContext,\n  )\n\n  const matchSelection = useRouterState({\n    select: (state: any) => {\n      const match = state.matches.find((d: any) =>\n        opts.from ? opts.from === d.routeId : d.id === nearestMatchId,\n      )\n      invariant(\n        !((opts.shouldThrow ?? true) && !match),\n        `Could not find ${opts.from ? `an active match from \"${opts.from}\"` : 'a nearest match!'}`,\n      )\n\n      if (match === undefined) {\n        return undefined\n      }\n\n      return opts.select ? opts.select(match) : match\n    },\n    structuralSharing: opts.structuralSharing,\n  } as any)\n\n  return matchSelection as any\n}\n"],"names":[],"mappings":";;;;AAqEO,SAAS,SAQd,MAQ6E;AAC7E,QAAM,iBAAiB,MAAM;AAAA,IAC3B,KAAK,OAAO,oBAAoB;AAAA,EAClC;AAEA,QAAM,iBAAiB,eAAe;AAAA,IACpC,QAAQ,CAAC,UAAe;AAChB,YAAA,QAAQ,MAAM,QAAQ;AAAA,QAAK,CAAC,MAChC,KAAK,OAAO,KAAK,SAAS,EAAE,UAAU,EAAE,OAAO;AAAA,MACjD;AACA;AAAA,QACE,GAAG,KAAK,eAAe,SAAS,CAAC;AAAA,QACjC,kBAAkB,KAAK,OAAO,yBAAyB,KAAK,IAAI,MAAM,kBAAkB;AAAA,MAC1F;AAEA,UAAI,UAAU,QAAW;AAChB,eAAA;AAAA,MAAA;AAGT,aAAO,KAAK,SAAS,KAAK,OAAO,KAAK,IAAI;AAAA,IAC5C;AAAA,IACA,mBAAmB,KAAK;AAAA,EAAA,CAClB;AAED,SAAA;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.81.6",
+  "version": "1.81.9",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "jsesc": "^3.0.2",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "1.81.6"
+    "@tanstack/history": "1.81.9"
   },
   "devDependencies": {
     "@types/jsesc": "^3.0.3",
@@ -68,7 +68,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@tanstack/router-generator": "1.81.6"
+    "@tanstack/router-generator": "1.81.9"
   },
   "peerDependenciesMeta": {
     "@tanstack/router-generator": {

package/src/matchContext.tsx

@@ -1,3 +1,8 @@
 import * as React from 'react'
 
 export const matchContext = React.createContext<string | undefined>(undefined)
+
+// N.B. this only exists so we can conditionally call useContext on it when we are not interested in the nearest match
+export const dummyMatchContext = React.createContext<string | undefined>(
+  undefined,
+)

package/src/router.ts

@@ -490,7 +490,7 @@ export interface RouterErrorSerializer<TSerializedError> {
 
 export interface RouterState<
   TRouteTree extends AnyRoute = AnyRoute,
-  TRouteMatch = MakeRouteMatch<TRouteTree>,
+  TRouteMatch = MakeRouteMatchUnion,
 > {
   status: 'pending' | 'idle'
   loadedAt: number
@@ -1242,9 +1242,11 @@ export class Router<
       // pending matches that are still loading
       const existingMatch = this.getMatch(matchId)
 
-      const cause = this.state.matches.find((d) => d.id === matchId)
-        ? 'stay'
-        : 'enter'
+      const previousMatch = this.state.matches.find(
+        (d) => d.routeId === route.id,
+      )
+
+      const cause = previousMatch ? 'stay' : 'enter'
 
       let match: AnyRouteMatch
 
@@ -1252,7 +1254,12 @@ export class Router<
         match = {
           ...existingMatch,
           cause,
-          params: routeParams,
+          params: previousMatch
+            ? replaceEqualDeep(previousMatch.params, routeParams)
+            : routeParams,
+          search: previousMatch
+            ? replaceEqualDeep(previousMatch.search, preMatchSearch)
+            : replaceEqualDeep(existingMatch.search, preMatchSearch),
         }
       } else {
         const status =
@@ -1267,10 +1274,14 @@ export class Router<
           id: matchId,
           index,
           routeId: route.id,
-          params: routeParams,
+          params: previousMatch
+            ? replaceEqualDeep(previousMatch.params, routeParams)
+            : routeParams,
           pathname: joinPaths([this.basepath, interpolatedPath]),
           updatedAt: Date.now(),
-          search: {} as any,
+          search: previousMatch
+            ? replaceEqualDeep(previousMatch.search, preMatchSearch)
+            : preMatchSearch,
           searchError: undefined,
           status,
           isFetching: false,
@@ -1282,7 +1293,9 @@ export class Router<
           abortController: new AbortController(),
           fetchCount: 0,
           cause,
-          loaderDeps,
+          loaderDeps: previousMatch
+            ? replaceEqualDeep(previousMatch.loaderDeps, loaderDeps)
+            : loaderDeps,
           invalid: false,
           preload: false,
           links: route.options.links?.(),
@@ -1314,10 +1327,7 @@ export class Router<
         match.globalNotFound = globalNotFoundRouteId === route.id
       }
 
-      // Regardless of whether we're reusing an existing match or creating
-      // a new one, we need to update the match's search params
-      match.search = replaceEqualDeep(match.search, preMatchSearch)
-      // And also update the searchError if there is one
+      // update the searchError if there is one
       match.searchError = searchError
 
       const parentMatchId = parentMatch?.id

package/src/useMatch.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import invariant from 'tiny-invariant'
 import { useRouterState } from './useRouterState'
-import { matchContext } from './matchContext'
+import { dummyMatchContext, matchContext } from './matchContext'
 import type {
   StructuralSharingOption,
   ValidateSelected,
@@ -84,7 +84,9 @@ export function useMatch<
     TStructuralSharing
   >,
 ): ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow> {
-  const nearestMatchId = React.useContext(matchContext)
+  const nearestMatchId = React.useContext(
+    opts.from ? dummyMatchContext : matchContext,
+  )
 
   const matchSelection = useRouterState({
     select: (state: any) => {