Angular routing using %2F in URL which is breaking routing

Question

I'm having some problem with routing in my app. If i write url by my own, the routing is working properly. But if i click like a basic user, it does not redirect me to the good route.

app.routing.ts

export const AppRoutes: Routes = [
    {
        path: 'pages',
        loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
    },    
    { path: '', redirectTo: 'pages', pathMatch: 'full' },
    { path: '**', redirectTo: 'pages' },
  
];

app.module.ts

...
imports: [
RouterModule.forRoot(AppRoutes, { relativeLinkResolution: 'legacy', onSameUrlNavigation: 'reload' })
]

pages.routing.ts

export const PagesRoutes: Routes = [{
  path: '',
  component: FullComponent,
  children: [
    {
      path: 'dashboard1',
      component: Dashboard1Component,
      data: {
        title: 'Dashboard 1',
        urls: [
          { title: 'Dashboard', url: '/pages/dashboard1' },
          { title: 'Dashboard 1' }
        ]
      }
    },
    {
      path: 'groups',
      component: GroupsComponent,
      data: {
        title: "Groupes/Utilisateurs",
        urls: [
          { title: 'MENU-ITEMS.dashboard', url: '/pages/dashboard1' },
          { title: "MATERIAL-ROUTING.groupAndUserManagement" }
        ]
      }
    }
],
}];

menu-items.ts

{
        state: '/pages/dashboard1',
        name: 'MENU-ITEMS.dashboard',
        type: 'link',
        icon: 'dashboard'
  
    },
    {
      state: '/pages/namespaces',
      name: 'MENU-ITEMS.FUNCTIONALITY.projects',
      type: 'link',
      icon: 'view_in_ar'
    },

So, when i start my application, it redirects me to /pages/dashboard1 and it displays it. But if i click on my menu to redirect me to /pages/namespaces it generates a link like that : http://localhost:4200/%2Fpages%2Fnamespaces

So i think that the problem is the %2F, because if i go to http://localhost:4200/pages/namespaces it works without problem.

I saw some topics related to %2F but very old and i don't find any solution to this.. I'm using Angular 11. Thanks for any help

EDIT : vertical-sidebar.component.html (The Menu)

<mat-nav-list appAccordion>
  <mat-list-item
    appAccordionLink
    *ngFor="let menuitem of menuItems.getMenuitem()"
    routerLinkActive="selected"
    group="{{ menuitem.state }}"
    (click)="scrollToTop()"
  >
    <a
      class=""
      appAccordionToggle
      [routerLink]="['/', menuitem.state]"
      *ngIf="menuitem.type === 'link'"
    >
      <mat-icon>{{ menuitem.icon }}</mat-icon>
      <span>{{ menuitem.name | translate }}</span>
      <span fxFlex></span>
      <span
        class="label label-{{ badge.type }}"
        *ngFor="let badge of menuitem.badge"
        >{{ badge.value }}</span
      >
    </a>

    <a
      class=""
      appAccordionToggle
      href="{{ menuitem.state }}"
      *ngIf="menuitem.type === 'extLink'"
    >
      <mat-icon>{{ menuitem.icon }}</mat-icon>
      <span>{{ menuitem.name | translate }}</span>
      <span fxFlex></span>
      <span
        class="label label-{{ badge.type }}"
        *ngFor="let badge of menuitem.badge"
        >{{ badge.value }}</span
      >
    </a>
    <a
      class=""
      appAccordionToggle
      href="{{ menuitem.state }}"
      target="_blank"
      *ngIf="menuitem.type === 'extTabLink'"
    >
      <mat-icon>{{ menuitem.icon }}</mat-icon>
      <span>{{ menuitem.name | translate }}</span>
      <span fxFlex></span>
      <span
        class="label label-{{ badge.type }}"
        *ngFor="let badge of menuitem.badge"
        >{{ badge.value }}</span
      >
    </a>

    <a
      class=""
      appAccordionToggle
      href="javascript:;"
      *ngIf="menuitem.type === 'sub'"
    >
      <mat-icon>{{ menuitem.icon }}</mat-icon>
      <span>{{ menuitem.name | translate }}</span>
      <span fxFlex></span>
      <span
        class="label label-{{ badge.type }}"
        *ngFor="let badge of menuitem.badge"
        >{{ badge.value }}</span
      >
      <mat-icon class="dd-icon">keyboard_arrow_down</mat-icon>
    </a>
    <mat-nav-list class="sub-item" *ngIf="menuitem.type === 'sub'">
      <mat-list-item
        *ngFor="
          let childitem of menuitem.children;
          let j = index;
          let i = childitem
        "
        routerLinkActive="selected"
      >
        <a
          [routerLink]="['/', menuitem.state, childitem.state]"
          *ngIf="childitem.type === 'link'"
          class="relative"
          routerLinkActive="selected"
          (click)="itemSelect[i] = j"
          >{{ childitem.name | translate }}</a
        >
      </mat-list-item>
      <mat-list-item
        *ngFor="
          let childitem of menuitem.children;
          let j = index;
          let i = childitem
        "
      >
        <a
          class=""
          href="javascript: void(0);"
          *ngIf="childitem.type === 'subchild'"
          (click)="itemSelect[i] = j"
          [ngClass]="j == itemSelect[i] ? 'selected' : ''"
        >
          <span>{{ childitem.name | translate }}</span>
          <span fxFlex></span>
          <mat-icon class="dd-icon">keyboard_arrow_down</mat-icon>
        </a>
      </mat-list-item>
    </mat-nav-list>

    <div class="saperator text-muted" *ngIf="menuitem.type === 'saperator'">
      <span>{{ menuitem.name | translate }}</span>
    </div>
  </mat-list-item>
</mat-nav-list>

Answer 1

Most likely the issue is caused by the presence of '/' symbol in the state params. Besides the parent route the '/' symbol is interpreted as part of the route instead of a separator hence being written as '%2f'. Making sure the state params don't have the '/' included in them should fix the issue

[routerLink]="['/', menuitem.state, childitem.state]"