fix(react-router): improve relative path matching edge cases

Author: ShaneK

packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx

@@ -469,7 +469,9 @@ export class ReactRouterViewStack extends ViewStacks {
     let parentPath: string | undefined = undefined;
     try {
       // Only attempt parent path computation for non-root outlets
-      if (outletId !== 'routerOutlet') {
+      // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
+      const isRootOutlet = outletId.startsWith('routerOutlet');
+      if (!isRootOutlet) {
         const routeChildren = extractRouteChildren(ionRouterOutlet.props.children);
         const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
 

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -109,28 +109,36 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
       return undefined;
     }
 
-    // If this is a nested outlet (has an explicit ID like "main"),
-    // we need to figure out what part of the path was already matched
-    if (this.id !== 'routerOutlet' && this.ionRouterOutlet) {
+    // Check if this outlet has route children to analyze
+    if (this.ionRouterOutlet) {
       const routeChildren = extractRouteChildren(this.ionRouterOutlet.props.children);
       const { hasRelativeRoutes, hasIndexRoute, hasWildcardRoute } = analyzeRouteChildren(routeChildren);
 
-      const result = computeParentPath({
-        currentPathname,
-        outletMountPath: this.outletMountPath,
-        routeChildren,
-        hasRelativeRoutes,
-        hasIndexRoute,
-        hasWildcardRoute,
-      });
+      // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
+      // But even outlets with auto-generated IDs may need parent path computation
+      // if they have relative routes (indicating they're nested outlets)
+      const isRootOutlet = this.id.startsWith('routerOutlet');
+      const needsParentPath = !isRootOutlet || hasRelativeRoutes || hasIndexRoute;
+
+      if (needsParentPath) {
+        const result = computeParentPath({
+          currentPathname,
+          outletMountPath: this.outletMountPath,
+          routeChildren,
+          hasRelativeRoutes,
+          hasIndexRoute,
+          hasWildcardRoute,
+        });
+
+        // Update the outlet mount path if it was set
+        if (result.outletMountPath && !this.outletMountPath) {
+          this.outletMountPath = result.outletMountPath;
+        }
 
-      // Update the outlet mount path if it was set
-      if (result.outletMountPath && !this.outletMountPath) {
-        this.outletMountPath = result.outletMountPath;
+        return result.parentPath;
       }
-
-      return result.parentPath;
     }
+
     return this.outletMountPath;
   }
 
@@ -246,7 +254,9 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
     parentPath: string | undefined,
     leavingViewItem: ViewItem | undefined
   ): boolean {
-    if (this.id === 'routerOutlet' || parentPath !== undefined || !this.ionRouterOutlet) {
+    // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
+    const isRootOutlet = this.id.startsWith('routerOutlet');
+    if (isRootOutlet || parentPath !== undefined || !this.ionRouterOutlet) {
       return false;
     }
 
@@ -283,7 +293,9 @@ export class StackManager extends React.PureComponent<StackManagerProps> {
     enteringViewItem: ViewItem | undefined,
     leavingViewItem: ViewItem | undefined
   ): boolean {
-    if (this.id === 'routerOutlet' || enteringRoute || enteringViewItem) {
+    // Root outlets have IDs like 'routerOutlet' or 'routerOutlet-2'
+    const isRootOutlet = this.id.startsWith('routerOutlet');
+    if (isRootOutlet || enteringRoute || enteringViewItem) {
       return false;
     }
 
@@ -943,7 +955,8 @@ function findRouteByRouteInfo(node: React.ReactNode, routeInfo: RouteInfo, paren
   // SIMPLIFIED: Trust React Router 6's matching more, compute relative path when parent is known
   if ((hasRelativeRoutes || hasIndexRoute) && parentPath) {
     const parentPrefix = parentPath.replace('/*', '');
-    const normalizedParent = stripTrailingSlash(parentPrefix);
+    // Normalize both paths to start with '/' for consistent comparison
+    const normalizedParent = stripTrailingSlash(parentPrefix.startsWith('/') ? parentPrefix : `/${parentPrefix}`);
     const normalizedPathname = stripTrailingSlash(routeInfo.pathname);
 
     // Only compute relative path if pathname is within parent scope
@@ -959,12 +972,29 @@ function findRouteByRouteInfo(node: React.ReactNode, routeInfo: RouteInfo, paren
   for (const child of sortedRoutes) {
     const childPath = child.props.path as string | undefined;
     const isAbsoluteRoute = childPath && childPath.startsWith('/');
+
+    // Determine which pathname to match against:
+    // - For absolute routes: use the original full pathname
+    // - For relative routes with a parent: use the computed relative pathname
+    // - For relative routes at root level (no parent): use the original pathname
+    //   (matchPath will handle the relative-to-absolute normalization)
     const pathnameToMatch = isAbsoluteRoute ? originalPathname : relativePathnameToMatch;
 
-    // Only use derivePathnameToMatch for absolute routes or wildcard patterns;
-    // non-wildcard relative routes match directly against the computed relative pathname.
+    // Determine the path portion to match:
+    // - For absolute routes: use derivePathnameToMatch
+    // - For relative routes at root level (no parent): use original pathname
+    //   directly since matchPath normalizes both path and pathname
+    // - For relative routes with parent: use derivePathnameToMatch for wildcards,
+    //   or the computed relative pathname for non-wildcards
     let pathForMatch: string;
-    if (isAbsoluteRoute || (childPath && childPath.includes('*'))) {
+    if (isAbsoluteRoute) {
+      pathForMatch = derivePathnameToMatch(pathnameToMatch, childPath);
+    } else if (!parentPath && childPath) {
+      // Root-level relative route: use the full pathname and let matchPath
+      // handle the normalization (it adds '/' to both path and pathname)
+      pathForMatch = originalPathname;
+    } else if (childPath && childPath.includes('*')) {
+      // Relative wildcard route with parent path: use derivePathnameToMatch
       pathForMatch = derivePathnameToMatch(pathnameToMatch, childPath);
     } else {
       pathForMatch = pathnameToMatch;

packages/react-router/src/ReactRouter/utils/pathMatching.ts

@@ -120,7 +120,10 @@ export const derivePathnameToMatch = (fullPathname: string, routePath?: string):
 
   const trimmedPath = fullPathname.startsWith('/') ? fullPathname.slice(1) : fullPathname;
   if (!trimmedPath) {
-    return '';
+    // For root-level relative routes (pathname is "/" and routePath is relative),
+    // return the full pathname so matchPath can normalize both.
+    // This allows routes like <Route path="foo/*" .../> at root level to work correctly.
+    return fullPathname;
   }
 
   const fullSegments = trimmedPath.split('/').filter(Boolean);

packages/react-router/test/base/src/App.tsx

@@ -71,7 +71,8 @@ const App: React.FC = () => {
           <Route path="/overlays" element={<Overlays />} />
           <Route path="/params/:id" element={<Params />} />
           <Route path="/nested-params/*" element={<NestedParams />} />
-          <Route path="/relative-paths/*" element={<RelativePaths />} />
+          {/* Test root-level relative path - no leading slash */}
+          <Route path="relative-paths/*" element={<RelativePaths />} />
         </IonRouterOutlet>
       </IonReactRouter>
     </IonApp>

packages/react-router/test/base/src/pages/relative-paths/RelativePaths.tsx

@@ -118,8 +118,7 @@ const RelativePaths: React.FC = () => {
       {/* Route with absolute path (has leading slash) - this should work */}
       <Route path="/relative-paths/page-a" element={<PageA />} />
 
-      {/* Routes with relative paths (no leading slash) - these should also work
-          but currently don't match in IonRouterOutlet */}
+      {/* Routes with relative paths (no leading slash) */}
       <Route path="page-b" element={<PageB />} />
       <Route path="page-c" element={<PageC />} />
 

packages/react-router/test/base/tests/e2e/specs/relative-paths.cy.js

@@ -1,16 +1,9 @@
 const port = 3000;
 
 /**
- * Tests for relative path handling in IonRouterOutlet
- *
- * Issue: IonRouterOutlet doesn't handle relative paths (without leading slash)
- * the same way React Router 6's Routes component does.
- *
- * In React Router 6, both of these should work identically:
- * - <Route path="/help" element={<Help />} />
- * - <Route path="help" element={<Help />} />
- *
- * However, IonRouterOutlet only matches the first one (with leading slash).
+ * Tests for relative path handling in IonRouterOutlet.
+ * Verifies that routes with relative paths (no leading slash) work
+ * the same as absolute paths, matching React Router 6 behavior.
  */
 describe('Relative Paths Tests', () => {
   it('should navigate to the relative paths home page', () => {
@@ -27,8 +20,6 @@ describe('Relative Paths Tests', () => {
   });
 
   it('should navigate to Page B (defined with relative path - no leading slash)', () => {
-    // This test verifies the bug - Page B route is defined as path="page-b" (no leading slash)
-    // It should work the same as path="/relative-paths/page-b" but currently doesn't
     cy.visit(`http://localhost:${port}/relative-paths`);
     cy.ionPageVisible('relative-paths-home');
     cy.ionNav('ion-item', 'Go to Page B');
@@ -37,7 +28,6 @@ describe('Relative Paths Tests', () => {
   });
 
   it('should navigate to Page C (defined with relative path - no leading slash)', () => {
-    // Another test for relative path handling
     cy.visit(`http://localhost:${port}/relative-paths`);
     cy.ionPageVisible('relative-paths-home');
     cy.ionNav('ion-item', 'Go to Page C');
@@ -46,14 +36,12 @@ describe('Relative Paths Tests', () => {
   });
 
   it('should navigate directly to Page B via URL', () => {
-    // Direct navigation to a page with a relative path route
     cy.visit(`http://localhost:${port}/relative-paths/page-b`);
     cy.ionPageVisible('relative-paths-page-b');
     cy.get('[data-testid="page-b-content"]').should('contain', 'Page B');
   });
 
   it('should navigate directly to Page C via URL', () => {
-    // Direct navigation to a page with a relative path route
     cy.visit(`http://localhost:${port}/relative-paths/page-c`);
     cy.ionPageVisible('relative-paths-page-c');
     cy.get('[data-testid="page-c-content"]').should('contain', 'Page C');