fix(react-router): support React Router 6 style relative paths in IonRouterOutlet (#30844)

Issue number: resolves [an issue from a
comment](#24177 (comment))

---------

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently, Ionic's RR6 doesn't support relative routes in the same way
RR6 does. Routes that do not start with a `/`do not work in the Ionic
RR6 implementation in some cases.

## What is the new behavior?

With this change, we properly support these route styles and more
closely align with normal RR6 route support.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

Current dev build:
```
 8.7.12-dev.11765307927.1f491e92
```

This PR will be merged into the RR6 branch, which will be squash+merged
into the major 9 branch. This will prevent major 9 from having commits
in the change log on release that reference fixing things that are only
available in major 9.

Author: ShaneK

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

@@ -384,30 +384,38 @@ export class ReactRouterViewStack extends ViewStacks {
 
           // For relative route paths, we need to compute an absolute pathnameBase
           // by combining the parent's pathnameBase with the matched portion
-          let absolutePathnameBase = routeMatch?.pathnameBase || routeInfo.pathname;
           const routePath = routeElement.props.path;
           const isRelativePath = routePath && !routePath.startsWith('/');
           const isIndexRoute = !!routeElement.props.index;
-
-          if (isRelativePath || isIndexRoute) {
-            // Get the parent's pathnameBase to build the absolute path
-            const parentPathnameBase =
-              parentMatches.length > 0 ? parentMatches[parentMatches.length - 1].pathnameBase : '/';
-
-            // For relative paths, the matchPath returns a relative pathnameBase
-            // We need to make it absolute by prepending the parent's base
-            if (routeMatch?.pathnameBase && isRelativePath) {
-              // Strip leading slash if present in the relative match
-              const relativeBase = routeMatch.pathnameBase.startsWith('/')
-                ? routeMatch.pathnameBase.slice(1)
-                : routeMatch.pathnameBase;
-
-              absolutePathnameBase =
-                parentPathnameBase === '/' ? `/${relativeBase}` : `${parentPathnameBase}/${relativeBase}`;
-            } else if (isIndexRoute) {
-              // Index routes should use the parent's base as their base
-              absolutePathnameBase = parentPathnameBase;
-            }
+          const isSplatOnlyRoute = routePath === '*' || routePath === '/*';
+
+          // Get parent's pathnameBase for relative path resolution
+          const parentPathnameBase =
+            parentMatches.length > 0 ? parentMatches[parentMatches.length - 1].pathnameBase : '/';
+
+          // Start with the match's pathnameBase, falling back to routeInfo.pathname
+          // BUT: splat-only routes should use parent's base (v7_relativeSplatPath behavior)
+          let absolutePathnameBase: string;
+
+          if (isSplatOnlyRoute) {
+            // Splat routes should NOT contribute their matched portion to pathnameBase
+            // This aligns with React Router v7's v7_relativeSplatPath behavior
+            // Without this, relative links inside splat routes get double path segments
+            absolutePathnameBase = parentPathnameBase;
+          } else if (isRelativePath && routeMatch?.pathnameBase) {
+            // For relative paths with a pathnameBase, combine with parent
+            const relativeBase = routeMatch.pathnameBase.startsWith('/')
+              ? routeMatch.pathnameBase.slice(1)
+              : routeMatch.pathnameBase;
+
+            absolutePathnameBase =
+              parentPathnameBase === '/' ? `/${relativeBase}` : `${parentPathnameBase}/${relativeBase}`;
+          } else if (isIndexRoute) {
+            // Index routes should use the parent's base as their base
+            absolutePathnameBase = parentPathnameBase;
+          } else {
+            // Default: use the match's pathnameBase or the current pathname
+            absolutePathnameBase = routeMatch?.pathnameBase || routeInfo.pathname;
           }
 
           const contextMatches = [
@@ -469,7 +477,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);
 
@@ -713,7 +723,17 @@ export class ReactRouterViewStack extends ViewStacks {
         return false;
       }
 
+      // For empty path routes, only match if we're at the same level as when the view was created.
+      // This prevents an empty path view item from being reused for different routes.
       if (isDefaultRoute) {
+        const previousPathnameBase = v.routeData?.match?.pathnameBase || '';
+        const normalizedBase = normalizePathnameForComparison(previousPathnameBase);
+        const normalizedPathname = normalizePathnameForComparison(pathname);
+
+        if (normalizedPathname !== normalizedBase) {
+          return false;
+        }
+
         match = {
           params: {},
           pathname,