Reuse static handler matcher for static routers

Assisted-By: devx/597728f0-1b3f-4153-b929-18dbff6cd683

Author: brophdawg11

packages/react-router/__tests__/dom/data-static-router-test.tsx

@@ -23,6 +23,47 @@ beforeEach(() => {
 });
 
 describe("A <StaticRouterProvider>", () => {
+  it("reuses the static handler route matcher", async () => {
+    let { query } = createStaticHandler([
+      {
+        id: "parent",
+        path: "parent",
+        children: [
+          { id: "child", path: "child" },
+          { id: "other", path: "other" },
+        ],
+      },
+    ]);
+    let context = (await query(
+      new Request("http://localhost/parent/child"),
+    )) as StaticHandlerContext;
+    expect(typeof context._match).toBe("function");
+    let otherElement = <h1>Other</h1>;
+
+    // This route tree is intentionally invalid so compiling a new matcher for
+    // it would throw instead of reusing the static handler matcher.
+    let router = createStaticRouter(
+      [
+        {
+          id: "parent",
+          path: "parent",
+          children: [
+            { id: "child", path: "/absolute" },
+            { id: "other", path: "other", element: otherElement },
+          ],
+        },
+      ],
+      context,
+    );
+
+    let matches = router.match("/parent/other");
+    expect(matches?.map((match) => match.route.id)).toEqual([
+      "parent",
+      "other",
+    ]);
+    expect(matches?.[1].route.element).toBe(otherElement);
+  });
+
   it("renders an initialized router", async () => {
     let hooksData1: {
       location: ReturnType<typeof useLocation>;

packages/react-router/lib/dom/server.tsx

@@ -365,19 +365,20 @@ export function createStaticRouter(
   let future: FutureConfig = {
     ...opts?.future,
   };
-  let dataRouteMatcher = createDataRouteMatcher(context.basename || "/");
-  dataRouteMatcher.update(dataRoutes);
+  let matchRoutes = context._match;
+  let dataRouteMatcher: ReturnType<typeof createDataRouteMatcher> | undefined;
 
   // Because our context matches may be from a set of routes passed to
   // createStaticHandler(), we update them here with our newly created/enhanced
   // data routes
-  let matches = context.matches.map((match) => {
+  let mapRouteMatch = (match: (typeof context.matches)[number]) => {
     let route = manifest[match.route.id] || match.route;
     return {
       ...match,
       route,
     };
-  });
+  };
+  let matches = context.matches.map(mapRouteMatch);
 
   let msg = (method: string) =>
     `You cannot use router.${method}() on the server because it is a stateless environment`;
@@ -417,7 +418,18 @@ export function createStaticRouter(
       return undefined;
     },
     match(locationArg) {
-      return dataRouteMatcher.match(locationArg);
+      let routeMatches;
+      if (matchRoutes) {
+        routeMatches = matchRoutes(locationArg);
+      } else {
+        // Contexts not created by createStaticHandler() need their own matcher.
+        if (!dataRouteMatcher) {
+          dataRouteMatcher = createDataRouteMatcher(context.basename || "/");
+          dataRouteMatcher.update(dataRoutes);
+        }
+        routeMatches = dataRouteMatcher.match(locationArg);
+      }
+      return routeMatches && routeMatches.map(mapRouteMatch);
     },
     initialize() {
       throw msg("initialize");

packages/react-router/lib/router/router.ts

@@ -468,6 +468,8 @@ export interface StaticHandlerContext {
   loaderHeaders: Record<string, Headers>;
   actionHeaders: Record<string, Headers>;
   _deepestRenderedBoundaryId?: string | null;
+  /** @private */
+  _match?: StaticHandler["match"];
 }
 
 /**
@@ -4062,6 +4064,8 @@ export function createStaticHandler(
     manifest,
   );
   dataRouteMatcher.update(dataRoutes);
+  let match: StaticHandler["match"] = (locationArg) =>
+    dataRouteMatcher.match(locationArg);
 
   /**
    * The query() method is intended for document requests, in which we want to
@@ -4130,6 +4134,7 @@ export function createStaticHandler(
         statusCode: error.status,
         loaderHeaders: {},
         actionHeaders: {},
+        _match: match,
       };
       return generateMiddlewareResponse
         ? generateMiddlewareResponse(() => Promise.resolve(staticContext))
@@ -4150,6 +4155,7 @@ export function createStaticHandler(
         statusCode: error.status,
         loaderHeaders: {},
         actionHeaders: {},
+        _match: match,
       };
       return generateMiddlewareResponse
         ? generateMiddlewareResponse(() => Promise.resolve(staticContext))
@@ -4223,7 +4229,12 @@ export function createStaticHandler(
                 // When returning StaticHandlerContext, we patch back in the location here
                 // since we need it for React Context.  But this helps keep our submit and
                 // loadRouteData operating on a Request instead of a Location
-                renderedStaticContext = { location, basename, ...result };
+                renderedStaticContext = {
+                  location,
+                  basename,
+                  ...result,
+                  _match: match,
+                };
                 return renderedStaticContext;
               },
             );
@@ -4305,6 +4316,7 @@ export function createStaticHandler(
                 statusCode: isRouteErrorResponse(error) ? error.status : 500,
                 actionHeaders: {},
                 loaderHeaders: {},
+                _match: match,
               };
               return generateMiddlewareResponse(() =>
                 Promise.resolve(staticContext),
@@ -4342,7 +4354,7 @@ export function createStaticHandler(
     // When returning StaticHandlerContext, we patch back in the location here
     // since we need it for React Context.  But this helps keep our submit and
     // loadRouteData operating on a Request instead of a Location
-    return { location, basename, ...result };
+    return { location, basename, ...result, _match: match };
   }
 
   /**
@@ -4963,9 +4975,7 @@ export function createStaticHandler(
 
   return {
     dataRoutes,
-    match(locationArg) {
-      return dataRouteMatcher.match(locationArg);
-    },
+    match,
     query,
     queryRoute,
   };