How to stay on the same dynamic URL after refreshing the page, angular 19

In my single page angular app I represent the groups data in the tabs, one tab per group, one dynamic url with groupId in it per group tab. During first loading a user gets redirected to the tab of the first group (by this.router.navigate['/groups/group', groups[0].groupId] at the first load). The question is how to stay on the last opened group (e.g. groups/group/test2) after refreshing the page? Is it possible to achieve that without using the local storage?

Groups data looks like this:

groups = [
{
groupName: 'Test1',
groupId: 'test1',
...
},
{
groupName: 'Test2',
groupId: 'test2',
...
}
]


My routing looks like this:

export const routes: Routes = [
{ path: '', component: AppComponent},
{ path: 'groups', component: GroupsComponent, canActivate: [AuthGuard],
children: [
{ path: 'group/:groupId', component: GroupComponent, canDeactivate: [UnsavedChangesGuard] }
]
},
{ path: '**', redirectTo: '' }
];


I see that it is possible to do for the static paths via the Location from @angular/common but it didn't work for the dynamic route.

Continue reading...