@tanstack/react-router 1.45.13 → 1.45.14

package/dist/cjs/Match.cjs

@@ -33,7 +33,9 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-function Match({ matchId }) {
+const Match = React__namespace.memo(function MatchImpl({
+  matchId
+}) {
   var _a, _b;
   const router = useRouter.useRouter();
   const routeId = useRouterState.useRouterState({
@@ -87,8 +89,10 @@ function Match({ matchId }) {
       )
     }
   ) }) });
-}
-function MatchInner({ matchId }) {
+});
+const MatchInner = React__namespace.memo(function MatchInnerImpl({
+  matchId
+}) {
   var _a, _b;
   const router = useRouter.useRouter();
   const routeId = useRouterState.useRouterState({
@@ -115,6 +119,10 @@ function MatchInner({ matchId }) {
       ]);
     }
   });
+  const out = React__namespace.useMemo(() => {
+    const Comp = route.options.component ?? router.options.defaultComponent;
+    return Comp ? /* @__PURE__ */ jsxRuntime.jsx(Comp, {}, matchId) : /* @__PURE__ */ jsxRuntime.jsx(Outlet, {});
+  }, [matchId, route.options.component, router.options.defaultComponent]);
   const RouteErrorComponent = (route.options.errorComponent ?? router.options.defaultErrorComponent) || CatchBoundary.ErrorComponent;
   if (match.status === "notFound") {
     let error;
@@ -172,14 +180,12 @@ function MatchInner({ matchId }) {
     }
     throw match.loadPromise;
   }
-  const Comp = route.options.component ?? router.options.defaultComponent;
-  const out = Comp ? /* @__PURE__ */ jsxRuntime.jsx(Comp, {}) : /* @__PURE__ */ jsxRuntime.jsx(Outlet, {});
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     out,
     router.AfterEachMatch ? /* @__PURE__ */ jsxRuntime.jsx(router.AfterEachMatch, { match, matchIndex }) : null
   ] });
-}
-const Outlet = React__namespace.memo(function Outlet2() {
+});
+const Outlet = React__namespace.memo(function OutletImpl() {
   const router = useRouter.useRouter();
   const matchId = React__namespace.useContext(matchContext.matchContext);
   const routeId = useRouterState.useRouterState({
@@ -224,5 +230,6 @@ const Outlet = React__namespace.memo(function Outlet2() {
   return nextMatch;
 });
 exports.Match = Match;
+exports.MatchInner = MatchInner;
 exports.Outlet = Outlet;
 //# sourceMappingURL=Match.cjs.map

package/dist/cjs/Match.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Match.cjs","sources":["../../src/Match.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { createControlledPromise, pick } from './utils'\nimport { CatchNotFound, isNotFound } from './not-found'\nimport { isRedirect } from './redirects'\nimport { matchContext } from './matchContext'\nimport { defaultDeserializeError, isServerSideError } from './isServerSideError'\nimport { SafeFragment } from './SafeFragment'\nimport { renderRouteNotFound } from './renderRouteNotFound'\nimport { rootRouteId } from './root'\nimport type { AnyRoute } from './route'\n\nexport function Match({ matchId }: { matchId: string }) {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  invariant(\n    routeId,\n    `Could not find routeId for matchId \"${matchId}\". Please file an issue!`,\n  )\n\n  const route: AnyRoute = router.routesById[routeId]\n\n  const PendingComponent =\n    route.options.pendingComponent ?? router.options.defaultPendingComponent\n\n  const pendingElement = PendingComponent ? <PendingComponent /> : null\n\n  const routeErrorComponent =\n    route.options.errorComponent ?? router.options.defaultErrorComponent\n\n  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch\n\n  const routeNotFoundComponent = route.isRoot\n    ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component\n      (route.options.notFoundComponent ??\n      router.options.notFoundRoute?.options.component)\n    : route.options.notFoundComponent\n\n  const ResolvedSuspenseBoundary =\n    // If we're on the root route, allow forcefully wrapping in suspense\n    (!route.isRoot || route.options.wrapInSuspense) &&\n    (route.options.wrapInSuspense ??\n      PendingComponent ??\n      (route.options.errorComponent as any)?.preload)\n      ? React.Suspense\n      : SafeFragment\n\n  const ResolvedCatchBoundary = routeErrorComponent\n    ? CatchBoundary\n    : SafeFragment\n\n  const ResolvedNotFoundBoundary = routeNotFoundComponent\n    ? CatchNotFound\n    : SafeFragment\n\n  const resetKey = useRouterState({\n    select: (s) => s.loadedAt,\n  })\n\n  return (\n    <matchContext.Provider value={matchId}>\n      <ResolvedSuspenseBoundary fallback={pendingElement}>\n        <ResolvedCatchBoundary\n          getResetKey={() => resetKey}\n          errorComponent={routeErrorComponent || ErrorComponent}\n          onCatch={(error, errorInfo) => {\n            // Forward not found errors (we don't want to show the error component for these)\n            if (isNotFound(error)) throw error\n            warning(false, `Error in route match: ${matchId}`)\n            routeOnCatch?.(error, errorInfo)\n          }}\n        >\n          <ResolvedNotFoundBoundary\n            fallback={(error) => {\n              // If the current not found handler doesn't exist or it has a\n              // route ID which doesn't match the current route, rethrow the error\n              if (\n                !routeNotFoundComponent ||\n                (error.routeId && error.routeId !== routeId) ||\n                (!error.routeId && !route.isRoot)\n              )\n                throw error\n\n              return React.createElement(routeNotFoundComponent, error as any)\n            }}\n          >\n            <MatchInner matchId={matchId} />\n          </ResolvedNotFoundBoundary>\n        </ResolvedCatchBoundary>\n      </ResolvedSuspenseBoundary>\n    </matchContext.Provider>\n  )\n}\nfunction MatchInner({ matchId }: { matchId: string }): any {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const matchIndex = useRouterState({\n    select: (s) => {\n      return s.matches.findIndex((d) => d.id === matchId)\n    },\n  })\n\n  const match = useRouterState({\n    select: (s) => {\n      const match = s.matches[matchIndex]!\n      return pick(match, [\n        'id',\n        'status',\n        'error',\n        'loadPromise',\n        'minPendingPromise',\n      ])\n    },\n  })\n\n  // function useChangedDiff(value: any) {\n  //   const ref = React.useRef(value)\n  //   const changed = ref.current !== value\n  //   if (changed) {\n  //     console.log(\n  //       'Changed:',\n  //       value,\n  //       Object.fromEntries(\n  //         Object.entries(value).filter(\n  //           ([key, val]) => val !== ref.current[key],\n  //         ),\n  //       ),\n  //     )\n  //   }\n  //   ref.current = value\n  // }\n\n  // useChangedDiff(match)\n\n  const RouteErrorComponent =\n    (route.options.errorComponent ?? router.options.defaultErrorComponent) ||\n    ErrorComponent\n\n  if (match.status === 'notFound') {\n    let error: unknown\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n\n      error = deserializeError(match.error.data)\n    } else {\n      error = match.error\n    }\n\n    invariant(isNotFound(error), 'Expected a notFound error')\n\n    return renderRouteNotFound(router, route, error)\n  }\n\n  if (match.status === 'redirected') {\n    // Redirects should be handled by the router transition. If we happen to\n    // encounter a redirect here, it's a bug. Let's warn, but render nothing.\n    invariant(isRedirect(match.error), 'Expected a redirect error')\n\n    // warning(\n    //   false,\n    //   'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',\n    // )\n    throw match.loadPromise\n  }\n\n  if (match.status === 'error') {\n    // If we're on the server, we need to use React's new and super\n    // wonky api for throwing errors from a server side render inside\n    // of a suspense boundary. This is the only way to get\n    // renderToPipeableStream to not hang indefinitely.\n    // We'll serialize the error and rethrow it on the client.\n    if (router.isServer) {\n      return (\n        <RouteErrorComponent\n          error={match.error}\n          info={{\n            componentStack: '',\n          }}\n        />\n      )\n    }\n\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n      throw deserializeError(match.error.data)\n    } else {\n      throw match.error\n    }\n  }\n\n  if (match.status === 'pending') {\n    // We're pending, and if we have a minPendingMs, we need to wait for it\n    const pendingMinMs =\n      route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n\n    if (pendingMinMs && !match.minPendingPromise) {\n      // Create a promise that will resolve after the minPendingMs\n      if (!router.isServer) {\n        const minPendingPromise = createControlledPromise<void>()\n\n        Promise.resolve().then(() => {\n          router.updateMatch(match.id, (prev) => ({\n            ...prev,\n            minPendingPromise,\n          }))\n        })\n\n        setTimeout(() => {\n          minPendingPromise.resolve()\n\n          // We've handled the minPendingPromise, so we can delete it\n          router.updateMatch(match.id, (prev) => ({\n            ...prev,\n            minPendingPromise: undefined,\n          }))\n        }, pendingMinMs)\n      }\n    }\n\n    throw match.loadPromise\n  }\n\n  const Comp = route.options.component ?? router.options.defaultComponent\n\n  const out = Comp ? <Comp /> : <Outlet />\n\n  return (\n    <>\n      {out}\n      {router.AfterEachMatch ? (\n        <router.AfterEachMatch match={match} matchIndex={matchIndex} />\n      ) : null}\n    </>\n  )\n}\n\nexport const Outlet = React.memo(function Outlet() {\n  const router = useRouter()\n  const matchId = React.useContext(matchContext)\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const { parentGlobalNotFound } = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const parentMatch = matches.find((d) => d.id === matchId)\n      invariant(\n        parentMatch,\n        `Could not find parent match for matchId \"${matchId}\"`,\n      )\n      return {\n        parentGlobalNotFound: parentMatch.globalNotFound,\n      }\n    },\n  })\n\n  const childMatchId = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const index = matches.findIndex((d) => d.id === matchId)\n      return matches[index + 1]?.id\n    },\n  })\n\n  if (parentGlobalNotFound) {\n    return renderRouteNotFound(router, route, undefined)\n  }\n\n  if (!childMatchId) {\n    return null\n  }\n\n  const nextMatch = <Match matchId={childMatchId} />\n\n  const pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  if (matchId === rootRouteId) {\n    return (\n      <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>\n    )\n  }\n\n  return nextMatch\n})\n"],"names":["match"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBgB;;AACd;AACA;AAA+B;;AACd;AAAyC;AAAA;AAG1D;AAAA;AACE;AAC8C;AAG1C;AAEN;AAGA;AAEA;AAGA;AAEA;AAAqC;AAAA;AAGK;AAGpC;AAAA;AAAA;AAOA;AAEA;AAIA;AAIN;AAAgC;AACb;AAIjB;AAEI;AAAC;AAAA;AACoB;AACoB;AAGjC;AACI;AACR;AAAsB;AACxB;AAEA;AAAC;AAAA;AAKK;AAIM;AAED;AAAwD;AACjE;AAE8B;AAAA;AAChC;AAAA;AAKV;AACA;;AACE;AACA;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEN;AAAkC;AAE9B;AAAkD;AACpD;AAGF;AAA6B;AAEnBA;AACN;AAAmB;AACjB;AACA;AACA;AACA;AACA;AACD;AACH;AAsBF;AAII;AACE;AACA;AACF;AAGQ;AAAiC;AAEzC;AAAc;AAGN;AAEH;AAAwC;AAG7C;AAGF;AAMA;AAAY;AAGV;AAMF;AAEI;AAAA;AAAC;AAAA;AACc;AACP;AACY;AAClB;AAAA;AAAA;AAKF;AACF;AAEM;AAAiC;AAEvC;AAAY;AACd;AAGE;AAEF;AAGI;AAEE;AACF;AAEQ;AACN;AAAwC;AACnC;AACH;AACA;AAGJ;AACE;AAGA;AAAwC;AACnC;AACgB;AACnB;AACW;AACjB;AAGF;AAAY;AAGd;AAEA;AAEA;AAEK;AAAA;AAGG;AAGV;AAEO;AACL;AACM;AACN;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEA;AAA0C;AAE5C;AACA;AACA;AAAA;AACE;AACmD;AAE9C;AAAA;AAC6B;AAAA;AAEtC;AAGF;AAAoC;;AAEhC;AACA;AACO;AAAoB;AAC7B;AAGF;AACS;AAA4C;AAGrD;AACS;AAAA;AAGT;AAEM;AAIN;AACE;AACuD;AAIlD;AACT;;;"}
+{"version":3,"file":"Match.cjs","sources":["../../src/Match.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { createControlledPromise, pick } from './utils'\nimport { CatchNotFound, isNotFound } from './not-found'\nimport { isRedirect } from './redirects'\nimport { matchContext } from './matchContext'\nimport { defaultDeserializeError, isServerSideError } from './isServerSideError'\nimport { SafeFragment } from './SafeFragment'\nimport { renderRouteNotFound } from './renderRouteNotFound'\nimport { rootRouteId } from './root'\nimport type { AnyRoute } from './route'\n\nexport const Match = React.memo(function MatchImpl({\n  matchId,\n}: {\n  matchId: string\n}) {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  invariant(\n    routeId,\n    `Could not find routeId for matchId \"${matchId}\". Please file an issue!`,\n  )\n\n  const route: AnyRoute = router.routesById[routeId]\n\n  const PendingComponent =\n    route.options.pendingComponent ?? router.options.defaultPendingComponent\n\n  const pendingElement = PendingComponent ? <PendingComponent /> : null\n\n  const routeErrorComponent =\n    route.options.errorComponent ?? router.options.defaultErrorComponent\n\n  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch\n\n  const routeNotFoundComponent = route.isRoot\n    ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component\n      (route.options.notFoundComponent ??\n      router.options.notFoundRoute?.options.component)\n    : route.options.notFoundComponent\n\n  const ResolvedSuspenseBoundary =\n    // If we're on the root route, allow forcefully wrapping in suspense\n    (!route.isRoot || route.options.wrapInSuspense) &&\n    (route.options.wrapInSuspense ??\n      PendingComponent ??\n      (route.options.errorComponent as any)?.preload)\n      ? React.Suspense\n      : SafeFragment\n\n  const ResolvedCatchBoundary = routeErrorComponent\n    ? CatchBoundary\n    : SafeFragment\n\n  const ResolvedNotFoundBoundary = routeNotFoundComponent\n    ? CatchNotFound\n    : SafeFragment\n\n  const resetKey = useRouterState({\n    select: (s) => s.loadedAt,\n  })\n\n  return (\n    <matchContext.Provider value={matchId}>\n      <ResolvedSuspenseBoundary fallback={pendingElement}>\n        <ResolvedCatchBoundary\n          getResetKey={() => resetKey}\n          errorComponent={routeErrorComponent || ErrorComponent}\n          onCatch={(error, errorInfo) => {\n            // Forward not found errors (we don't want to show the error component for these)\n            if (isNotFound(error)) throw error\n            warning(false, `Error in route match: ${matchId}`)\n            routeOnCatch?.(error, errorInfo)\n          }}\n        >\n          <ResolvedNotFoundBoundary\n            fallback={(error) => {\n              // If the current not found handler doesn't exist or it has a\n              // route ID which doesn't match the current route, rethrow the error\n              if (\n                !routeNotFoundComponent ||\n                (error.routeId && error.routeId !== routeId) ||\n                (!error.routeId && !route.isRoot)\n              )\n                throw error\n\n              return React.createElement(routeNotFoundComponent, error as any)\n            }}\n          >\n            <MatchInner matchId={matchId} />\n          </ResolvedNotFoundBoundary>\n        </ResolvedCatchBoundary>\n      </ResolvedSuspenseBoundary>\n    </matchContext.Provider>\n  )\n})\n\nexport const MatchInner = React.memo(function MatchInnerImpl({\n  matchId,\n}: {\n  matchId: string\n}): any {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const matchIndex = useRouterState({\n    select: (s) => {\n      return s.matches.findIndex((d) => d.id === matchId)\n    },\n  })\n\n  const match = useRouterState({\n    select: (s) => {\n      const match = s.matches[matchIndex]!\n      return pick(match, [\n        'id',\n        'status',\n        'error',\n        'loadPromise',\n        'minPendingPromise',\n      ])\n    },\n  })\n\n  const out = React.useMemo(() => {\n    const Comp = route.options.component ?? router.options.defaultComponent\n    return Comp ? <Comp key={matchId} /> : <Outlet />\n  }, [matchId, route.options.component, router.options.defaultComponent])\n\n  // function useChangedDiff(value: any) {\n  //   const ref = React.useRef(value)\n  //   const changed = ref.current !== value\n  //   if (changed) {\n  //     console.log(\n  //       'Changed:',\n  //       value,\n  //       Object.fromEntries(\n  //         Object.entries(value).filter(\n  //           ([key, val]) => val !== ref.current[key],\n  //         ),\n  //       ),\n  //     )\n  //   }\n  //   ref.current = value\n  // }\n\n  // useChangedDiff(match)\n\n  const RouteErrorComponent =\n    (route.options.errorComponent ?? router.options.defaultErrorComponent) ||\n    ErrorComponent\n\n  if (match.status === 'notFound') {\n    let error: unknown\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n\n      error = deserializeError(match.error.data)\n    } else {\n      error = match.error\n    }\n\n    invariant(isNotFound(error), 'Expected a notFound error')\n\n    return renderRouteNotFound(router, route, error)\n  }\n\n  if (match.status === 'redirected') {\n    // Redirects should be handled by the router transition. If we happen to\n    // encounter a redirect here, it's a bug. Let's warn, but render nothing.\n    invariant(isRedirect(match.error), 'Expected a redirect error')\n\n    // warning(\n    //   false,\n    //   'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',\n    // )\n    throw match.loadPromise\n  }\n\n  if (match.status === 'error') {\n    // If we're on the server, we need to use React's new and super\n    // wonky api for throwing errors from a server side render inside\n    // of a suspense boundary. This is the only way to get\n    // renderToPipeableStream to not hang indefinitely.\n    // We'll serialize the error and rethrow it on the client.\n    if (router.isServer) {\n      return (\n        <RouteErrorComponent\n          error={match.error}\n          info={{\n            componentStack: '',\n          }}\n        />\n      )\n    }\n\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n      throw deserializeError(match.error.data)\n    } else {\n      throw match.error\n    }\n  }\n\n  if (match.status === 'pending') {\n    // We're pending, and if we have a minPendingMs, we need to wait for it\n    const pendingMinMs =\n      route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n\n    if (pendingMinMs && !match.minPendingPromise) {\n      // Create a promise that will resolve after the minPendingMs\n      if (!router.isServer) {\n        const minPendingPromise = createControlledPromise<void>()\n\n        Promise.resolve().then(() => {\n          router.updateMatch(match.id, (prev) => ({\n            ...prev,\n            minPendingPromise,\n          }))\n        })\n\n        setTimeout(() => {\n          minPendingPromise.resolve()\n\n          // We've handled the minPendingPromise, so we can delete it\n          router.updateMatch(match.id, (prev) => ({\n            ...prev,\n            minPendingPromise: undefined,\n          }))\n        }, pendingMinMs)\n      }\n    }\n\n    throw match.loadPromise\n  }\n\n  return (\n    <>\n      {out}\n      {router.AfterEachMatch ? (\n        <router.AfterEachMatch match={match} matchIndex={matchIndex} />\n      ) : null}\n    </>\n  )\n})\n\nexport const Outlet = React.memo(function OutletImpl() {\n  const router = useRouter()\n  const matchId = React.useContext(matchContext)\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const { parentGlobalNotFound } = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const parentMatch = matches.find((d) => d.id === matchId)\n      invariant(\n        parentMatch,\n        `Could not find parent match for matchId \"${matchId}\"`,\n      )\n      return {\n        parentGlobalNotFound: parentMatch.globalNotFound,\n      }\n    },\n  })\n\n  const childMatchId = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const index = matches.findIndex((d) => d.id === matchId)\n      return matches[index + 1]?.id\n    },\n  })\n\n  if (parentGlobalNotFound) {\n    return renderRouteNotFound(router, route, undefined)\n  }\n\n  if (!childMatchId) {\n    return null\n  }\n\n  const nextMatch = <Match matchId={childMatchId} />\n\n  const pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  if (matchId === rootRouteId) {\n    return (\n      <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>\n    )\n  }\n\n  return nextMatch\n})\n"],"names":["match"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBO;AAA4C;AAEnD;;AAGE;AACA;AAA+B;;AACd;AAAyC;AAAA;AAG1D;AAAA;AACE;AAC8C;AAG1C;AAEN;AAGA;AAEA;AAGA;AAEA;AAAqC;AAAA;AAGK;AAGpC;AAAA;AAAA;AAOA;AAEA;AAIA;AAIN;AAAgC;AACb;AAIjB;AAEI;AAAC;AAAA;AACoB;AACoB;AAGjC;AACI;AACR;AAAsB;AACxB;AAEA;AAAC;AAAA;AAKK;AAIM;AAED;AAAwD;AACjE;AAE8B;AAAA;AAChC;AAAA;AAKV;AAEO;AAAsD;AAE7D;;AAGE;AACA;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEN;AAAkC;AAE9B;AAAkD;AACpD;AAGF;AAA6B;AAEnBA;AACN;AAAmB;AACjB;AACA;AACA;AACA;AACA;AACD;AACH;AAGI;AACJ;AACA;AAA+C;AAsBjD;AAII;AACE;AACA;AACF;AAGQ;AAAiC;AAEzC;AAAc;AAGN;AAEH;AAAwC;AAG7C;AAGF;AAMA;AAAY;AAGV;AAMF;AAEI;AAAA;AAAC;AAAA;AACc;AACP;AACY;AAClB;AAAA;AAAA;AAKF;AACF;AAEM;AAAiC;AAEvC;AAAY;AACd;AAGE;AAEF;AAGI;AAEE;AACF;AAEQ;AACN;AAAwC;AACnC;AACH;AACA;AAGJ;AACE;AAGA;AAAwC;AACnC;AACgB;AACnB;AACW;AACjB;AAGF;AAAY;AAGd;AAEK;AAAA;AAGG;AAGV;AAEO;AACL;AACM;AACN;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEA;AAA0C;AAE5C;AACA;AACA;AAAA;AACE;AACmD;AAE9C;AAAA;AAC6B;AAAA;AAEtC;AAGF;AAAoC;;AAEhC;AACA;AACO;AAAoB;AAC7B;AAGF;AACS;AAA4C;AAGrD;AACS;AAAA;AAGT;AAEM;AAIN;AACE;AACuD;AAIlD;AACT;;;;"}

package/dist/cjs/Match.d.cts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-export declare function Match({ matchId }: {
+export declare const Match: React.NamedExoticComponent<{
     matchId: string;
-}): import("react/jsx-runtime").JSX.Element;
+}>;
+export declare const MatchInner: React.NamedExoticComponent<{
+    matchId: string;
+}>;
 export declare const Outlet: React.NamedExoticComponent<object>;

package/dist/esm/Match.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-export declare function Match({ matchId }: {
+export declare const Match: React.NamedExoticComponent<{
     matchId: string;
-}): import("react/jsx-runtime").JSX.Element;
+}>;
+export declare const MatchInner: React.NamedExoticComponent<{
+    matchId: string;
+}>;
 export declare const Outlet: React.NamedExoticComponent<object>;

package/dist/esm/Match.js

@@ -14,7 +14,9 @@ import { isServerSideError, defaultDeserializeError } from "./isServerSideError.
 import { SafeFragment } from "./SafeFragment.js";
 import { renderRouteNotFound } from "./renderRouteNotFound.js";
 import { rootRouteId } from "./root.js";
-function Match({ matchId }) {
+const Match = React.memo(function MatchImpl({
+  matchId
+}) {
   var _a, _b;
   const router = useRouter();
   const routeId = useRouterState({
@@ -68,8 +70,10 @@ function Match({ matchId }) {
       )
     }
   ) }) });
-}
-function MatchInner({ matchId }) {
+});
+const MatchInner = React.memo(function MatchInnerImpl({
+  matchId
+}) {
   var _a, _b;
   const router = useRouter();
   const routeId = useRouterState({
@@ -96,6 +100,10 @@ function MatchInner({ matchId }) {
       ]);
     }
   });
+  const out = React.useMemo(() => {
+    const Comp = route.options.component ?? router.options.defaultComponent;
+    return Comp ? /* @__PURE__ */ jsx(Comp, {}, matchId) : /* @__PURE__ */ jsx(Outlet, {});
+  }, [matchId, route.options.component, router.options.defaultComponent]);
   const RouteErrorComponent = (route.options.errorComponent ?? router.options.defaultErrorComponent) || ErrorComponent;
   if (match.status === "notFound") {
     let error;
@@ -153,14 +161,12 @@ function MatchInner({ matchId }) {
     }
     throw match.loadPromise;
   }
-  const Comp = route.options.component ?? router.options.defaultComponent;
-  const out = Comp ? /* @__PURE__ */ jsx(Comp, {}) : /* @__PURE__ */ jsx(Outlet, {});
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     out,
     router.AfterEachMatch ? /* @__PURE__ */ jsx(router.AfterEachMatch, { match, matchIndex }) : null
   ] });
-}
-const Outlet = React.memo(function Outlet2() {
+});
+const Outlet = React.memo(function OutletImpl() {
   const router = useRouter();
   const matchId = React.useContext(matchContext);
   const routeId = useRouterState({
@@ -206,6 +212,7 @@ const Outlet = React.memo(function Outlet2() {
 });
 export {
   Match,
+  MatchInner,
   Outlet
 };
 //# sourceMappingURL=Match.js.map

package/dist/esm/Match.js.map

@@ -1 +1 @@
-{"version":3,"file":"Match.js","sources":["../../src/Match.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { createControlledPromise, pick } from './utils'\nimport { CatchNotFound, isNotFound } from './not-found'\nimport { isRedirect } from './redirects'\nimport { matchContext } from './matchContext'\nimport { defaultDeserializeError, isServerSideError } from './isServerSideError'\nimport { SafeFragment } from './SafeFragment'\nimport { renderRouteNotFound } from './renderRouteNotFound'\nimport { rootRouteId } from './root'\nimport type { AnyRoute } from './route'\n\nexport function Match({ matchId }: { matchId: string }) {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  invariant(\n    routeId,\n    `Could not find routeId for matchId \"${matchId}\". Please file an issue!`,\n  )\n\n  const route: AnyRoute = router.routesById[routeId]\n\n  const PendingComponent =\n    route.options.pendingComponent ?? router.options.defaultPendingComponent\n\n  const pendingElement = PendingComponent ? <PendingComponent /> : null\n\n  const routeErrorComponent =\n    route.options.errorComponent ?? router.options.defaultErrorComponent\n\n  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch\n\n  const routeNotFoundComponent = route.isRoot\n    ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component\n      (route.options.notFoundComponent ??\n      router.options.notFoundRoute?.options.component)\n    : route.options.notFoundComponent\n\n  const ResolvedSuspenseBoundary =\n    // If we're on the root route, allow forcefully wrapping in suspense\n    (!route.isRoot || route.options.wrapInSuspense) &&\n    (route.options.wrapInSuspense ??\n      PendingComponent ??\n      (route.options.errorComponent as any)?.preload)\n      ? React.Suspense\n      : SafeFragment\n\n  const ResolvedCatchBoundary = routeErrorComponent\n    ? CatchBoundary\n    : SafeFragment\n\n  const ResolvedNotFoundBoundary = routeNotFoundComponent\n    ? CatchNotFound\n    : SafeFragment\n\n  const resetKey = useRouterState({\n    select: (s) => s.loadedAt,\n  })\n\n  return (\n    <matchContext.Provider value={matchId}>\n      <ResolvedSuspenseBoundary fallback={pendingElement}>\n        <ResolvedCatchBoundary\n          getResetKey={() => resetKey}\n          errorComponent={routeErrorComponent || ErrorComponent}\n          onCatch={(error, errorInfo) => {\n            // Forward not found errors (we don't want to show the error component for these)\n            if (isNotFound(error)) throw error\n            warning(false, `Error in route match: ${matchId}`)\n            routeOnCatch?.(error, errorInfo)\n          }}\n        >\n          <ResolvedNotFoundBoundary\n            fallback={(error) => {\n              // If the current not found handler doesn't exist or it has a\n              // route ID which doesn't match the current route, rethrow the error\n              if (\n                !routeNotFoundComponent ||\n                (error.routeId && error.routeId !== routeId) ||\n                (!error.routeId && !route.isRoot)\n              )\n                throw error\n\n              return React.createElement(routeNotFoundComponent, error as any)\n            }}\n          >\n            <MatchInner matchId={matchId} />\n          </ResolvedNotFoundBoundary>\n        </ResolvedCatchBoundary>\n      </ResolvedSuspenseBoundary>\n    </matchContext.Provider>\n  )\n}\nfunction MatchInner({ matchId }: { matchId: string }): any {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const matchIndex = useRouterState({\n    select: (s) => {\n      return s.matches.findIndex((d) => d.id === matchId)\n    },\n  })\n\n  const match = useRouterState({\n    select: (s) => {\n      const match = s.matches[matchIndex]!\n      return pick(match, [\n        'id',\n        'status',\n        'error',\n        'loadPromise',\n        'minPendingPromise',\n      ])\n    },\n  })\n\n  // function useChangedDiff(value: any) {\n  //   const ref = React.useRef(value)\n  //   const changed = ref.current !== value\n  //   if (changed) {\n  //     console.log(\n  //       'Changed:',\n  //       value,\n  //       Object.fromEntries(\n  //         Object.entries(value).filter(\n  //           ([key, val]) => val !== ref.current[key],\n  //         ),\n  //       ),\n  //     )\n  //   }\n  //   ref.current = value\n  // }\n\n  // useChangedDiff(match)\n\n  const RouteErrorComponent =\n    (route.options.errorComponent ?? router.options.defaultErrorComponent) ||\n    ErrorComponent\n\n  if (match.status === 'notFound') {\n    let error: unknown\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n\n      error = deserializeError(match.error.data)\n    } else {\n      error = match.error\n    }\n\n    invariant(isNotFound(error), 'Expected a notFound error')\n\n    return renderRouteNotFound(router, route, error)\n  }\n\n  if (match.status === 'redirected') {\n    // Redirects should be handled by the router transition. If we happen to\n    // encounter a redirect here, it's a bug. Let's warn, but render nothing.\n    invariant(isRedirect(match.error), 'Expected a redirect error')\n\n    // warning(\n    //   false,\n    //   'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',\n    // )\n    throw match.loadPromise\n  }\n\n  if (match.status === 'error') {\n    // If we're on the server, we need to use React's new and super\n    // wonky api for throwing errors from a server side render inside\n    // of a suspense boundary. This is the only way to get\n    // renderToPipeableStream to not hang indefinitely.\n    // We'll serialize the error and rethrow it on the client.\n    if (router.isServer) {\n      return (\n        <RouteErrorComponent\n          error={match.error}\n          info={{\n            componentStack: '',\n          }}\n        />\n      )\n    }\n\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n      throw deserializeError(match.error.data)\n    } else {\n      throw match.error\n    }\n  }\n\n  if (match.status === 'pending') {\n    // We're pending, and if we have a minPendingMs, we need to wait for it\n    const pendingMinMs =\n      route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n\n    if (pendingMinMs && !match.minPendingPromise) {\n      // Create a promise that will resolve after the minPendingMs\n      if (!router.isServer) {\n        const minPendingPromise = createControlledPromise<void>()\n\n        Promise.resolve().then(() => {\n          router.updateMatch(match.id, (prev) => ({\n            ...prev,\n            minPendingPromise,\n          }))\n        })\n\n        setTimeout(() => {\n          minPendingPromise.resolve()\n\n          // We've handled the minPendingPromise, so we can delete it\n          router.updateMatch(match.id, (prev) => ({\n            ...prev,\n            minPendingPromise: undefined,\n          }))\n        }, pendingMinMs)\n      }\n    }\n\n    throw match.loadPromise\n  }\n\n  const Comp = route.options.component ?? router.options.defaultComponent\n\n  const out = Comp ? <Comp /> : <Outlet />\n\n  return (\n    <>\n      {out}\n      {router.AfterEachMatch ? (\n        <router.AfterEachMatch match={match} matchIndex={matchIndex} />\n      ) : null}\n    </>\n  )\n}\n\nexport const Outlet = React.memo(function Outlet() {\n  const router = useRouter()\n  const matchId = React.useContext(matchContext)\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const { parentGlobalNotFound } = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const parentMatch = matches.find((d) => d.id === matchId)\n      invariant(\n        parentMatch,\n        `Could not find parent match for matchId \"${matchId}\"`,\n      )\n      return {\n        parentGlobalNotFound: parentMatch.globalNotFound,\n      }\n    },\n  })\n\n  const childMatchId = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const index = matches.findIndex((d) => d.id === matchId)\n      return matches[index + 1]?.id\n    },\n  })\n\n  if (parentGlobalNotFound) {\n    return renderRouteNotFound(router, route, undefined)\n  }\n\n  if (!childMatchId) {\n    return null\n  }\n\n  const nextMatch = <Match matchId={childMatchId} />\n\n  const pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  if (matchId === rootRouteId) {\n    return (\n      <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>\n    )\n  }\n\n  return nextMatch\n})\n"],"names":["match"],"mappings":";;;;;;;;;;;;;;;;AAkBgB;;AACd;AACA;AAA+B;;AACd;AAAyC;AAAA;AAG1D;AAAA;AACE;AAC8C;AAG1C;AAEN;AAGA;AAEA;AAGA;AAEA;AAAqC;AAAA;AAGK;AAGpC;AAAA;AAAA;AAOA;AAEA;AAIA;AAIN;AAAgC;AACb;AAIjB;AAEI;AAAC;AAAA;AACoB;AACoB;AAGjC;AACI;AACR;AAAsB;AACxB;AAEA;AAAC;AAAA;AAKK;AAIM;AAED;AAAwD;AACjE;AAE8B;AAAA;AAChC;AAAA;AAKV;AACA;;AACE;AACA;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEN;AAAkC;AAE9B;AAAkD;AACpD;AAGF;AAA6B;AAEnBA;AACN;AAAmB;AACjB;AACA;AACA;AACA;AACA;AACD;AACH;AAsBF;AAII;AACE;AACA;AACF;AAGQ;AAAiC;AAEzC;AAAc;AAGN;AAEH;AAAwC;AAG7C;AAGF;AAMA;AAAY;AAGV;AAMF;AAEI;AAAA;AAAC;AAAA;AACc;AACP;AACY;AAClB;AAAA;AAAA;AAKF;AACF;AAEM;AAAiC;AAEvC;AAAY;AACd;AAGE;AAEF;AAGI;AAEE;AACF;AAEQ;AACN;AAAwC;AACnC;AACH;AACA;AAGJ;AACE;AAGA;AAAwC;AACnC;AACgB;AACnB;AACW;AACjB;AAGF;AAAY;AAGd;AAEA;AAEA;AAEK;AAAA;AAGG;AAGV;AAEO;AACL;AACM;AACN;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEA;AAA0C;AAE5C;AACA;AACA;AAAA;AACE;AACmD;AAE9C;AAAA;AAC6B;AAAA;AAEtC;AAGF;AAAoC;;AAEhC;AACA;AACO;AAAoB;AAC7B;AAGF;AACS;AAA4C;AAGrD;AACS;AAAA;AAGT;AAEM;AAIN;AACE;AACuD;AAIlD;AACT;;;;;"}
+{"version":3,"file":"Match.js","sources":["../../src/Match.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport invariant from 'tiny-invariant'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { createControlledPromise, pick } from './utils'\nimport { CatchNotFound, isNotFound } from './not-found'\nimport { isRedirect } from './redirects'\nimport { matchContext } from './matchContext'\nimport { defaultDeserializeError, isServerSideError } from './isServerSideError'\nimport { SafeFragment } from './SafeFragment'\nimport { renderRouteNotFound } from './renderRouteNotFound'\nimport { rootRouteId } from './root'\nimport type { AnyRoute } from './route'\n\nexport const Match = React.memo(function MatchImpl({\n  matchId,\n}: {\n  matchId: string\n}) {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  invariant(\n    routeId,\n    `Could not find routeId for matchId \"${matchId}\". Please file an issue!`,\n  )\n\n  const route: AnyRoute = router.routesById[routeId]\n\n  const PendingComponent =\n    route.options.pendingComponent ?? router.options.defaultPendingComponent\n\n  const pendingElement = PendingComponent ? <PendingComponent /> : null\n\n  const routeErrorComponent =\n    route.options.errorComponent ?? router.options.defaultErrorComponent\n\n  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch\n\n  const routeNotFoundComponent = route.isRoot\n    ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component\n      (route.options.notFoundComponent ??\n      router.options.notFoundRoute?.options.component)\n    : route.options.notFoundComponent\n\n  const ResolvedSuspenseBoundary =\n    // If we're on the root route, allow forcefully wrapping in suspense\n    (!route.isRoot || route.options.wrapInSuspense) &&\n    (route.options.wrapInSuspense ??\n      PendingComponent ??\n      (route.options.errorComponent as any)?.preload)\n      ? React.Suspense\n      : SafeFragment\n\n  const ResolvedCatchBoundary = routeErrorComponent\n    ? CatchBoundary\n    : SafeFragment\n\n  const ResolvedNotFoundBoundary = routeNotFoundComponent\n    ? CatchNotFound\n    : SafeFragment\n\n  const resetKey = useRouterState({\n    select: (s) => s.loadedAt,\n  })\n\n  return (\n    <matchContext.Provider value={matchId}>\n      <ResolvedSuspenseBoundary fallback={pendingElement}>\n        <ResolvedCatchBoundary\n          getResetKey={() => resetKey}\n          errorComponent={routeErrorComponent || ErrorComponent}\n          onCatch={(error, errorInfo) => {\n            // Forward not found errors (we don't want to show the error component for these)\n            if (isNotFound(error)) throw error\n            warning(false, `Error in route match: ${matchId}`)\n            routeOnCatch?.(error, errorInfo)\n          }}\n        >\n          <ResolvedNotFoundBoundary\n            fallback={(error) => {\n              // If the current not found handler doesn't exist or it has a\n              // route ID which doesn't match the current route, rethrow the error\n              if (\n                !routeNotFoundComponent ||\n                (error.routeId && error.routeId !== routeId) ||\n                (!error.routeId && !route.isRoot)\n              )\n                throw error\n\n              return React.createElement(routeNotFoundComponent, error as any)\n            }}\n          >\n            <MatchInner matchId={matchId} />\n          </ResolvedNotFoundBoundary>\n        </ResolvedCatchBoundary>\n      </ResolvedSuspenseBoundary>\n    </matchContext.Provider>\n  )\n})\n\nexport const MatchInner = React.memo(function MatchInnerImpl({\n  matchId,\n}: {\n  matchId: string\n}): any {\n  const router = useRouter()\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const matchIndex = useRouterState({\n    select: (s) => {\n      return s.matches.findIndex((d) => d.id === matchId)\n    },\n  })\n\n  const match = useRouterState({\n    select: (s) => {\n      const match = s.matches[matchIndex]!\n      return pick(match, [\n        'id',\n        'status',\n        'error',\n        'loadPromise',\n        'minPendingPromise',\n      ])\n    },\n  })\n\n  const out = React.useMemo(() => {\n    const Comp = route.options.component ?? router.options.defaultComponent\n    return Comp ? <Comp key={matchId} /> : <Outlet />\n  }, [matchId, route.options.component, router.options.defaultComponent])\n\n  // function useChangedDiff(value: any) {\n  //   const ref = React.useRef(value)\n  //   const changed = ref.current !== value\n  //   if (changed) {\n  //     console.log(\n  //       'Changed:',\n  //       value,\n  //       Object.fromEntries(\n  //         Object.entries(value).filter(\n  //           ([key, val]) => val !== ref.current[key],\n  //         ),\n  //       ),\n  //     )\n  //   }\n  //   ref.current = value\n  // }\n\n  // useChangedDiff(match)\n\n  const RouteErrorComponent =\n    (route.options.errorComponent ?? router.options.defaultErrorComponent) ||\n    ErrorComponent\n\n  if (match.status === 'notFound') {\n    let error: unknown\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n\n      error = deserializeError(match.error.data)\n    } else {\n      error = match.error\n    }\n\n    invariant(isNotFound(error), 'Expected a notFound error')\n\n    return renderRouteNotFound(router, route, error)\n  }\n\n  if (match.status === 'redirected') {\n    // Redirects should be handled by the router transition. If we happen to\n    // encounter a redirect here, it's a bug. Let's warn, but render nothing.\n    invariant(isRedirect(match.error), 'Expected a redirect error')\n\n    // warning(\n    //   false,\n    //   'Tried to render a redirected route match! This is a weird circumstance, please file an issue!',\n    // )\n    throw match.loadPromise\n  }\n\n  if (match.status === 'error') {\n    // If we're on the server, we need to use React's new and super\n    // wonky api for throwing errors from a server side render inside\n    // of a suspense boundary. This is the only way to get\n    // renderToPipeableStream to not hang indefinitely.\n    // We'll serialize the error and rethrow it on the client.\n    if (router.isServer) {\n      return (\n        <RouteErrorComponent\n          error={match.error}\n          info={{\n            componentStack: '',\n          }}\n        />\n      )\n    }\n\n    if (isServerSideError(match.error)) {\n      const deserializeError =\n        router.options.errorSerializer?.deserialize ?? defaultDeserializeError\n      throw deserializeError(match.error.data)\n    } else {\n      throw match.error\n    }\n  }\n\n  if (match.status === 'pending') {\n    // We're pending, and if we have a minPendingMs, we need to wait for it\n    const pendingMinMs =\n      route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n\n    if (pendingMinMs && !match.minPendingPromise) {\n      // Create a promise that will resolve after the minPendingMs\n      if (!router.isServer) {\n        const minPendingPromise = createControlledPromise<void>()\n\n        Promise.resolve().then(() => {\n          router.updateMatch(match.id, (prev) => ({\n            ...prev,\n            minPendingPromise,\n          }))\n        })\n\n        setTimeout(() => {\n          minPendingPromise.resolve()\n\n          // We've handled the minPendingPromise, so we can delete it\n          router.updateMatch(match.id, (prev) => ({\n            ...prev,\n            minPendingPromise: undefined,\n          }))\n        }, pendingMinMs)\n      }\n    }\n\n    throw match.loadPromise\n  }\n\n  return (\n    <>\n      {out}\n      {router.AfterEachMatch ? (\n        <router.AfterEachMatch match={match} matchIndex={matchIndex} />\n      ) : null}\n    </>\n  )\n})\n\nexport const Outlet = React.memo(function OutletImpl() {\n  const router = useRouter()\n  const matchId = React.useContext(matchContext)\n  const routeId = useRouterState({\n    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,\n  })\n\n  const route = router.routesById[routeId]!\n\n  const { parentGlobalNotFound } = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const parentMatch = matches.find((d) => d.id === matchId)\n      invariant(\n        parentMatch,\n        `Could not find parent match for matchId \"${matchId}\"`,\n      )\n      return {\n        parentGlobalNotFound: parentMatch.globalNotFound,\n      }\n    },\n  })\n\n  const childMatchId = useRouterState({\n    select: (s) => {\n      const matches = s.matches\n      const index = matches.findIndex((d) => d.id === matchId)\n      return matches[index + 1]?.id\n    },\n  })\n\n  if (parentGlobalNotFound) {\n    return renderRouteNotFound(router, route, undefined)\n  }\n\n  if (!childMatchId) {\n    return null\n  }\n\n  const nextMatch = <Match matchId={childMatchId} />\n\n  const pendingElement = router.options.defaultPendingComponent ? (\n    <router.options.defaultPendingComponent />\n  ) : null\n\n  if (matchId === rootRouteId) {\n    return (\n      <React.Suspense fallback={pendingElement}>{nextMatch}</React.Suspense>\n    )\n  }\n\n  return nextMatch\n})\n"],"names":["match"],"mappings":";;;;;;;;;;;;;;;;AAkBO;AAA4C;AAEnD;;AAGE;AACA;AAA+B;;AACd;AAAyC;AAAA;AAG1D;AAAA;AACE;AAC8C;AAG1C;AAEN;AAGA;AAEA;AAGA;AAEA;AAAqC;AAAA;AAGK;AAGpC;AAAA;AAAA;AAOA;AAEA;AAIA;AAIN;AAAgC;AACb;AAIjB;AAEI;AAAC;AAAA;AACoB;AACoB;AAGjC;AACI;AACR;AAAsB;AACxB;AAEA;AAAC;AAAA;AAKK;AAIM;AAED;AAAwD;AACjE;AAE8B;AAAA;AAChC;AAAA;AAKV;AAEO;AAAsD;AAE7D;;AAGE;AACA;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEN;AAAkC;AAE9B;AAAkD;AACpD;AAGF;AAA6B;AAEnBA;AACN;AAAmB;AACjB;AACA;AACA;AACA;AACA;AACD;AACH;AAGI;AACJ;AACA;AAA+C;AAsBjD;AAII;AACE;AACA;AACF;AAGQ;AAAiC;AAEzC;AAAc;AAGN;AAEH;AAAwC;AAG7C;AAGF;AAMA;AAAY;AAGV;AAMF;AAEI;AAAA;AAAC;AAAA;AACc;AACP;AACY;AAClB;AAAA;AAAA;AAKF;AACF;AAEM;AAAiC;AAEvC;AAAY;AACd;AAGE;AAEF;AAGI;AAEE;AACF;AAEQ;AACN;AAAwC;AACnC;AACH;AACA;AAGJ;AACE;AAGA;AAAwC;AACnC;AACgB;AACnB;AACW;AACjB;AAGF;AAAY;AAGd;AAEK;AAAA;AAGG;AAGV;AAEO;AACL;AACM;AACN;AAA+B;;AACd;AAAyC;AAAA;AAGpD;AAEA;AAA0C;AAE5C;AACA;AACA;AAAA;AACE;AACmD;AAE9C;AAAA;AAC6B;AAAA;AAEtC;AAGF;AAAoC;;AAEhC;AACA;AACO;AAAoB;AAC7B;AAGF;AACS;AAA4C;AAGrD;AACS;AAAA;AAGT;AAEM;AAIN;AACE;AACuD;AAIlD;AACT;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.45.13",
+  "version": "1.45.14",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/Match.tsx

@@ -16,7 +16,11 @@ import { renderRouteNotFound } from './renderRouteNotFound'
 import { rootRouteId } from './root'
 import type { AnyRoute } from './route'
 
-export function Match({ matchId }: { matchId: string }) {
+export const Match = React.memo(function MatchImpl({
+  matchId,
+}: {
+  matchId: string
+}) {
   const router = useRouter()
   const routeId = useRouterState({
     select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,
@@ -99,8 +103,13 @@ export function Match({ matchId }: { matchId: string }) {
       </ResolvedSuspenseBoundary>
     </matchContext.Provider>
   )
-}
-function MatchInner({ matchId }: { matchId: string }): any {
+})
+
+export const MatchInner = React.memo(function MatchInnerImpl({
+  matchId,
+}: {
+  matchId: string
+}): any {
   const router = useRouter()
   const routeId = useRouterState({
     select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,
@@ -127,6 +136,11 @@ function MatchInner({ matchId }: { matchId: string }): any {
     },
   })
 
+  const out = React.useMemo(() => {
+    const Comp = route.options.component ?? router.options.defaultComponent
+    return Comp ? <Comp key={matchId} /> : <Outlet />
+  }, [matchId, route.options.component, router.options.defaultComponent])
+
   // function useChangedDiff(value: any) {
   //   const ref = React.useRef(value)
   //   const changed = ref.current !== value
@@ -236,10 +250,6 @@ function MatchInner({ matchId }: { matchId: string }): any {
     throw match.loadPromise
   }
 
-  const Comp = route.options.component ?? router.options.defaultComponent
-
-  const out = Comp ? <Comp /> : <Outlet />
-
   return (
     <>
       {out}
@@ -248,9 +258,9 @@ function MatchInner({ matchId }: { matchId: string }): any {
       ) : null}
     </>
   )
-}
+})
 
-export const Outlet = React.memo(function Outlet() {
+export const Outlet = React.memo(function OutletImpl() {
   const router = useRouter()
   const matchId = React.useContext(matchContext)
   const routeId = useRouterState({