fix(router): pass outlet context to split to fix empty path named outlets

atscott · pkozlowski-opensource · commit 0960592d3d4f · 2026-04-01T11:48:47.000+02:00
The `split` helper function in `packages/router/src/utils/config_matching.ts` was blind to the current outlet being processed. When encountering an empty path named outlet in the config, it would assume it needed to pull it in as a synthetic empty group, even if we were already in the process of resolving that very outlet! When navigating to `/(secondary:component-copy)` with this config: ```typescript { path: '', component: MainLayout, children: [ { path: '', outlet: 'secondary', component: SecondaryComponent, children: [{path: 'component-copy'}] } ] } ``` The router uses `MainLayout` as a pass-through and calls `split` on its children with segments `['component-copy']`. `split` uses the `containsEmptyPathMatchesWithNamedOutlets` helper to determine if there are any candidate empty path named outlets to pull in. Because of this, it sees `{ path: '', outlet: 'secondary' }` and says: "Ah, an empty path named outlet! I must pull it in!" Rather than falling through to standard segment matching, it returns `UrlSegmentGroup(segments: [], children: {secondary: emptyGroup})`. The router then tries to process `primary` (with `[]` segments) and fails because the config only has `secondary`. It also tries to process `secondary` with the `emptyGroup`. While `{ path: '', outlet: 'secondary' }` matches the empty group, its child `{ path: 'component-copy' }` fails to match because the `emptyGroup` has no segments! So both branches fail, resulting in a `NoMatch` error for the entire navigation! Pulling in empty path named outlets IS desired when they act as siblings to segments we are matching. This has worked before and continues to work! ```typescript { path: 'a', children: [ { path: 'b', component: ComponentB }, { path: '', component: ComponentC, outlet: 'aux' } ] } ``` When navigating to `a/b`, `split` sees segments `['b']` and the `aux` empty path. It pulls in `aux` so it gets instantiated alongside `b`. This is correct! If we have a named outlet with a non-empty path under an empty path parent: ```typescript { path: '', component: MainLayout, children: [ { path: 'component-copy', outlet: 'secondary', component: ComponentE } ] } ``` When we navigate to `/(secondary:component-copy)`: - `split` uses `containsEmptyPathMatchesWithNamedOutlets` to see if there are any empty path named outlets. Since it only sees `path: 'component-copy'`, it returns `false`. - It falls through to standard segment matching, which finds `component-copy` in the segments array and activates it flawlessly! This worked perfectly before the fix because it didn't use `containsEmptyPathMatchesWithNamedOutlets`. The fix passes the **current active outlet context** into `split`. If `split` finds an empty path named outlet that matches the outlet we are already processing, it ignores it as a pull-in candidate. When evaluating `MainLayout` children for `secondary`: - URL Segments left to process: `['component-copy']` - Current Outlet: `secondary` - `childConfig`: `[{ path: '', outlet: 'secondary' }]` Previously, `split` saw the empty path and pulled it in as a synthetic empty group, breaking matching. Now, since `getOutlet(r) === outlet` (both are `secondary`), the fix ignores it. Instead of returning empty segments, it **falls through to standard segment matching**, which successfully find the `component-copy` segment! When evaluating `ComponentA` children for `primary`: - URL Segments left to process: `['b']` - Current Outlet: `primary` - `childConfig`: `[{ path: 'b' }, { path: '', outlet: 'aux' }]` Since `getOutlet(aux) !== primary`, the fix **does not ignore it**. `split` pulls in `aux: emptyGroup` as a sibling, instantiating `ComponentC` alongside `ComponentB`. This preserves correct behavior for auxiliary outlets! fixes #67708 (cherry picked from commit daa9b2a)
diff --git a/packages/router/src/recognize.ts b/packages/router/src/recognize.ts
@@ -454,6 +454,7 @@ export class Recognizer {
       consumedSegments,
       remainingSegments,
       childConfig,
+      outlet,
     );
 
     if (slicedSegments.length === 0 && segmentGroup.hasChildren()) {
diff --git a/packages/router/src/utils/config_matching.ts b/packages/router/src/utils/config_matching.ts
@@ -126,13 +126,14 @@ export function split(
   consumedSegments: UrlSegment[],
   slicedSegments: UrlSegment[],
   config: Route[],
+  outlet?: string,
 ): {
   segmentGroup: UrlSegmentGroup;
   slicedSegments: UrlSegment[];
 } {
   if (
     slicedSegments.length > 0 &&
-    containsEmptyPathMatchesWithNamedOutlets(segmentGroup, slicedSegments, config)
+    containsEmptyPathMatchesWithNamedOutlets(segmentGroup, slicedSegments, config, outlet)
   ) {
     const s = new UrlSegmentGroup(
       consumedSegments,
@@ -195,10 +196,24 @@ function containsEmptyPathMatchesWithNamedOutlets(
   segmentGroup: UrlSegmentGroup,
   slicedSegments: UrlSegment[],
   routes: Route[],
+  outlet?: string,
 ): boolean {
-  return routes.some(
-    (r) => emptyPathMatch(segmentGroup, slicedSegments, r) && getOutlet(r) !== PRIMARY_OUTLET,
-  );
+  return routes.some((r) => {
+    // 1. Can this route match as an empty path?
+    const matchesEmpty = emptyPathMatch(segmentGroup, slicedSegments, r);
+    if (!matchesEmpty) return false;
+
+    // 2. Is this a named outlet? (We only pull in empty paths if they are named outlets).
+    const isNamedOutlet = getOutlet(r) !== PRIMARY_OUTLET;
+    if (!isNamedOutlet) return false;
+
+    // 3. Are we already processing this outlet? If so, we ignore it as a pull-in
+    // candidate. For example, if we are evaluating the 'secondary' outlet, we shouldn't
+    // "pull in" an empty 'secondary' group.  We should let standard
+    // segment matching handle it (which looks at the actual characters in the URL).
+    const isSelfEvaluating = outlet !== undefined && getOutlet(r) === outlet;
+    return !isSelfEvaluating;
+  });
 }
 
 function containsEmptyPathMatches(
diff --git a/packages/router/test/recognize.spec.ts b/packages/router/test/recognize.spec.ts
@@ -578,6 +578,71 @@ describe('recognize', () => {
         await expectAsync(recognizePromise).toBeRejected();
       });
     });
+
+    describe('nested empty paths with outlets (issue 67708)', () => {
+      it('should match nested primary child regardless of named outlet empty path sibling', async () => {
+        const config = [
+          {
+            path: '',
+            component: ComponentA,
+            children: [
+              {
+                path: '',
+                component: ComponentB,
+                children: [{path: 'component', component: ComponentC}],
+              },
+              {
+                path: '',
+                outlet: 'secondary',
+                component: ComponentD,
+                children: [{path: 'component-copy', component: ComponentE}],
+              },
+            ],
+          },
+        ];
+
+        const s = await recognize(config, 'component');
+        checkActivatedRoute(s.root.firstChild!, '', {}, ComponentA);
+        const c = s.root.firstChild!.children;
+        // Should find primary child
+        checkActivatedRoute(c[0], '', {}, ComponentB, PRIMARY_OUTLET);
+        checkActivatedRoute(c[0].firstChild!, 'component', {}, ComponentC);
+      });
+
+      it('should match named outlet child when navigating to it via secondary URL', async () => {
+        const config = [
+          {
+            path: '',
+            component: ComponentA,
+            children: [
+              {
+                path: '',
+                component: ComponentB,
+                children: [{path: 'component', component: ComponentC}],
+              },
+              {
+                path: '',
+                outlet: 'secondary',
+                component: ComponentD,
+                children: [{path: 'component-copy', component: ComponentA}],
+              },
+            ],
+          },
+        ];
+
+        const s = await recognize(config, '(secondary:component-copy)');
+        checkActivatedRoute(s.root.firstChild!, '', {}, ComponentA);
+        const c = s.root.firstChild!.children;
+        const primaryRoute = c.find((r: any) => r.outlet === PRIMARY_OUTLET);
+        expect(primaryRoute).toBeDefined();
+        checkActivatedRoute(primaryRoute!, '', {}, ComponentB, PRIMARY_OUTLET);
+
+        const secondaryRoute = c.find((r: any) => r.outlet === 'secondary');
+        expect(secondaryRoute).toBeDefined();
+        checkActivatedRoute(secondaryRoute!, '', {}, ComponentD, 'secondary');
+        checkActivatedRoute(secondaryRoute!.firstChild!, 'component-copy', {}, ComponentA);
+      });
+    });
   });
 
   describe('wildcards', () => {
