Angular routerLinkActive undefined after refresh with parameter

Question

I'm working with Angular 5, my routerLinkActive doesn't work and displays that my parameter is undefined after I refresh the page.

This is my routes:

    const childRoutes: Routes = [
  {
    path: '', data: { expectedRole: 'ADMIN' }, canActivate: [RoleGard],
    children: [
      { path: '', redirectTo: 'list', pathMatch: 'full' },
      { path: 'list', component: MembersListComponent },
    ]
  },
  {
    path: ':id', data: { expectedRole: 'ADMIN' }, canActivate: [RoleGard],
    children: [
      { path: '', redirectTo: 'edit', pathMatch: 'full' },
      { path: 'edit', component: MemberEditComponent },
      { path: 'status', component: MemberStatusComponent },
      { path: 'delete', component: MemberDeleteComponent }
    ]
  }
];

In my nav bar, I display the children routes like this:

<a class="navbar-navItem" [routerLink]="['members', id, 'edit']" routerLinkActive="active">
    <span class="navbar-navItem-text">{{ 'NAV_BAR.member.edit'|translate }}</span>
  </a>
  <a class="navbar-navItem" [routerLink]="['members', id, 'status']" routerLinkActive="active">
    <span class="navbar-navItem-text">{{ 'NAV_BAR.member.status'|translate }}</span>
  </a>
  <a class="navbar-navItem" [routerLink]="['members', id, 'delete']" routerLinkActive="active">
    <span class="navbar-navItem-text">{{ 'NAV_BAR.member.delete'|translate }}</span>
  </a>

It works perfectly when I navigate to the 'edit' route for instance. But when I hit F5, the activeRouterLink doesn't work. And if I navigate to 'status', it works again.

Any idea ? Thanks in advance