After one redirect all child route are active

Issue

In one page of my Angular 15 app I have one router to display nested routes:

<app-sidebar></app-sidebar>
<ion-router-outlet></ion-router-outlet>

Where my app-sidebar is:

<ion-list>
  <ion-item *ngFor="let route of profileRoutes">
    <ion-button
      [routerLink]="route.path"
      routerLinkActive="active-item">
      {{ route.label }}
    </ion-button>
  </ion-item>
</ion-list>

And profileRoutes implements this interface:

export interface ProfileRoute {
  path: string;
  label: string;
}

Here there is the configuration of my routes:

const routes = [
  {
     path: 'profile',
     loadComponent: () =>
       import('./path-to-component').then(
         m => m.Component
       ),
     children: childrenRoutes,
  }
]
const childrenRoutes = [
  {
    path: 'route-1',
    loadComponent: () =>
      import('path-to-component').then(
        m => m.Component
      ),
  },
  {
    path: 'route-2',
    loadComponent: () =>
      import('path-to-component').then(
        m => m.Component
      ),
  },
  ...
]

Behavior

1. Click on the button route-1 once and works as expected (redirect to /profile/route-1).
2. Afterwards, click on button route-2 and the user doesn't get redirect, plus all button get the class active-item signaling that all routes are triggered as active.
3. If I right click and "Open in another tab", the route is triggered as expected and I can restart from action 1.

Furthermore, this warning is logged on action 2.

The navigation to /profile/route-1 will instead go to /profile/route-2 in an upcoming version of Angular. relativeTo might need to be removed from the UrlCreationOptions

But I've never used relativeTo anywhere.

I tried to add a name at the secondary ion-router-outlet and adding the outlet property at the paths in childrenRoutes but without success.

Solution

This happens because routerLink automatically set the relativeTo option to your current route, and you want it to be your parent route.
You could use activatedRoute to find your parent route and relativeTo it. Note that now you have to add profile to your path.

<ion-button
    [routerLink]="['profile', route.path]"
    [relativeTo]="activatedRoute.parent"
    routerLinkActive="active-item">
    {{ route.label }}
</ion-button>

Answered By - Igor Cantele