route navigation is not working in angular 13

Viewed 744

have the same Problem as route navigation is not working in angular 9 , the suggestions on this site did not bring success. And the solution was not clear to me.

app-routing.module.ts:

routes
...
   {path: 'person', loadChildren: () => import('@xyz/person').then(module => module.PersonModule)},
...

       RouterModule.forRoot([
           {path: '', redirectTo: 'start', pathMatch: 'full'},
           {path: 'autherror/:type', component: xyzComponent},
           {path: '', runGuardsAndResolvers: 'always', children: routes}
       ], {
           useHash: true, 
           preloadingStrategy: PreloadAllModules,
           onSameUrlNavigation: 'reload'
       }),
   exports: [RouterModule],
   providers: [CanDeactivateGuard]


then in the person module, person.module.ts:

...
    {path: 'person/:id', component: PersonEditorComponent, canDeactivate: [CanDeactivateGuard]},
...

The PersonEditor has a handler to switch to another person like so:

            const link = [`person/person/${$event.id}`];
            this.router.navigate(link);

The Link is indeed switching urls, but the site is not refreshed with the new content for the new url. Thanks for any suggestions.

1 Answers

I am not sure but you should try replace this line:

const link = [`person/person/${$event.id}`];
        this.router.navigate(link);

with:

const link = `person/person/${$event.id}`;
        this.router.navigate([link]);
Related