Nested routes with param and router refresh process

29 views Asked by At

I have the following routes definition:

{
    path: 'clients',
    loadChildren: () =>
      import('@app/domains/clients').then((m) => m.WebClientsModule,),
},

Then inside the WebClientsModule, I have the following routes definition:

const routes: Routes = [
  {
    path: '',
    component: ClientsContainerComponent, // Where I render the clients list
  },
  {
    path: ':id',
    component: ClientDetailsContainerComponent, // Rendering a component with a mat-toggle-button-group which manages the switch between client details and client managers list
    children: [
      {
        path: '',
        component: ClientDetailsViewComponent, // Rendering the nested client basic info details view
      },
      {
        path: ‘managers’,
        component: ClientManagersContainerComponent, // Rendering the client managers list
      },
    ],
  },
];

The problem happens when I navigate to the client details: clients/{id} and after clicking the mat-toggle-button-group in the managers option, it navigates to the clients/{id}/managers but if I refresh the page when I’m stay in the managers view, it redirects to the clients/{id} basic info route.

How can I solve this issue maintaining the nested route? I want to allow to update both routes separately and avoid the managers to redirect to the client basic info one.

enter image description here

0

There are 0 answers