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.
