Fix initial matching in fog of war when a splat route matches (#11759)

.changeset/rich-bees-invent.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/router": patch
+---
+
+Fix initial matching in fog of war when a splat route matches

package.json

@@ -105,7 +105,7 @@
   },
   "filesize": {
     "packages/router/dist/router.umd.min.js": {
-      "none": "56.3 kB"
+      "none": "56.4 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
       "none": "14.9 kB"

packages/router/__tests__/lazy-discovery-test.ts

@@ -541,6 +541,34 @@ describe("Lazy Route Discovery (Fog of War)", () => {
     expect(router.state.matches.map((m) => m.route.id)).toEqual(["a", "b"]);
   });
 
+  it("de-prioritizes splat routes in favor of looking for better async matches (splat/*)", async () => {
+    router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        {
+          path: "/",
+        },
+        {
+          id: "splat",
+          path: "/splat/*",
+        },
+      ],
+      async unstable_patchRoutesOnMiss({ matches, patch }) {
+        await tick();
+        patch(null, [
+          {
+            id: "static",
+            path: "/splat/static",
+          },
+        ]);
+      },
+    });
+
+    await router.navigate("/splat/static");
+    expect(router.state.location.pathname).toBe("/splat/static");
+    expect(router.state.matches.map((m) => m.route.id)).toEqual(["static"]);
+  });
+
   it("matches splats when other paths don't pan out", async () => {
     router = createRouter({
       history: createMemoryHistory(),
@@ -628,6 +656,39 @@ describe("Lazy Route Discovery (Fog of War)", () => {
     ]);
   });
 
+  it("discovers routes during initial hydration when a splat route matches", async () => {
+    let childrenDfd = createDeferred<AgnosticDataRouteObject[]>();
+
+    router = createRouter({
+      history: createMemoryHistory({ initialEntries: ["/test"] }),
+      routes: [
+        {
+          path: "/",
+        },
+        {
+          path: "*",
+        },
+      ],
+      async unstable_patchRoutesOnMiss({ path, patch, matches }) {
+        let children = await childrenDfd.promise;
+        patch(null, children);
+      },
+    });
+    router.initialize();
+    expect(router.state.initialized).toBe(false);
+
+    childrenDfd.resolve([
+      {
+        id: "test",
+        path: "/test",
+      },
+    ]);
+    await tick();
+    expect(router.state.initialized).toBe(true);
+    expect(router.state.location.pathname).toBe("/test");
+    expect(router.state.matches.map((m) => m.route.id)).toEqual(["test"]);
+  });
+
   it("discovers new root routes", async () => {
     let childrenDfd = createDeferred<AgnosticDataRouteObject[]>();
     let childLoaderDfd = createDeferred();
@@ -737,7 +798,7 @@ describe("Lazy Route Discovery (Fog of War)", () => {
     let childLoaderDfd = createDeferred();
 
     router = createRouter({
-      history: createMemoryHistory(),
+      history: createMemoryHistory({ initialEntries: ["/other"] }),
       routes: [
         {
           id: "other",

packages/router/router.ts

@@ -841,6 +841,20 @@ export function createRouter(init: RouterInit): Router {
     initialErrors = { [route.id]: error };
   }
 
+  // If the user provided a patchRoutesOnMiss implementation and our initial
+  // match is a splat route, clear them out so we run through lazy discovery
+  // on hydration in case there's a more accurate lazy route match
+  if (initialMatches && patchRoutesOnMissImpl) {
+    let fogOfWar = checkFogOfWar(
+      initialMatches,
+      dataRoutes,
+      init.history.location.pathname
+    );
+    if (fogOfWar.active) {
+      initialMatches = null;
+    }
+  }
+
   let initialized: boolean;
   if (!initialMatches) {
     // We need to run patchRoutesOnMiss in initialize()
@@ -3162,7 +3176,10 @@ export function createRouter(init: RouterInit): Router {
         return { active: true, matches: fogMatches || [] };
       } else {
         let leafRoute = matches[matches.length - 1].route;
-        if (leafRoute.path === "*") {
+        if (
+          leafRoute.path &&
+          (leafRoute.path === "*" || leafRoute.path.endsWith("/*"))
+        ) {
           // If we matched a splat, it might only be because we haven't yet fetched
           // the children that would match with a higher score, so let's fetch
           // around and find out