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 · Accepted Answer · 2020-09-12 06:19:22Z

2

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

edited Sep 12, 2020 at 6:19

answered Sep 12, 2020 at 5:42

Hrishikesh Kale

6,6484 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hrishikesh Kale Over a year ago

router.navigateByUrl(/exam-panel/${examdetails.Id}) ? what is your examdetails.Id is coming? did you console log it?

anil singh butola Over a year ago

examdetails is an json array come from API HTTP request

anil singh butola Over a year ago

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 Over a year ago

router.navigate(['/exam-panel', examdetails.Id], {relativeTo: route}); did you try this adding ' / ' in router.navgate before exam-panel?

anil singh butola Over a year ago

{relativeTo: route} can you explain to me what is "route"

Collectives™ on Stack Overflow

angular 10 routing & navigation error with parameter

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related