angular 10 routing & navigation error with parameter

Question

route array

const routes: Routes = [
 ...
  {path:'exam-list',component: ExamListComponent},
    {path:'exam-panel/:Id',component: ExamPanelComponent}
..
];

array imported

@NgModule({
  imports: [RouterModule.forRoot(routes)],

click event

onSelect(examdetails)
{
this.router.navigate(['exam-panel',examdetails.Id])
}

on click event onselect()

I got this error Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'exam-panel' with parameter when I am using routerLink it's work fine but on click event is not working with router.navigate

when i am using [routerLink]="['/exam-panel/',examdetails.Id]" it's working but when I am using "router.navigate" it naviagte first route exam-panel with parmeter ok, then automatically route to home page

Hrishikesh Kale Hrishikesh Kale · Accepted Answer · 2020-09-12T05:42:02

As per mentioned in doc https://angular.io/docs/ts/latest/api/router/index/Router-class.html, you can use either

navigateByUrl :

router.navigateByUrl(`/exam-panel/${examdetails.Id}`);

or using navigate :

router.navigate(['/exam-panel', examdetails.Id], {relativeTo: route});

relative to calls request navigation to a dynamic route path relative to the current URL.

please remember we often forget / it is a relative route. router. navigate needs a relativeTo parameter for relative navigation

angular 10 routing & navigation error with parameter

1 Answers