Route mismatch

Question

It's showing an error message saying it can't match any routes, but I have clearly defined the route I'm using here:

  {
    path: 'categories',
    component: CategoriesComponent,
  },
  {
    path: 'categories/:id',
    component: CategoryComponent,
  }

and called it like this:

  edit(id: number){
    this.router.navigate(['/', id]);
  }

The edit() function is linked to a button.

I'm not sure what mistake I'm making, but I keep getting this error:

core.mjs:6485 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '9'
Error: Cannot match any routes. URL Segment: '9'

However, when I manually redirect the URL to:

http://localhost:4200/dashboard/categories/9

it works perfectly fine. I feel like I must be missing something obvious, but for the life of me, I can't figure out where my mistake is hiding.

Please save me the time it will take to find the error.

I'm still new to Angular.

Answer 1

Answer №1

If it is appropriate, you can utilize the method relativeTo:

edit(id: number) {
  this.router.navigate(['/', id], { relativeTo: this.route });
}

Alternatively, you can explicitly indicate the route to navigate to using /categories:

edit(id: number) {
  this.router.navigate(['/categories', id]);
}

Answer 2

If it is appropriate, you can utilize the method relativeTo:

edit(id: number) {
  this.router.navigate(['/', id], { relativeTo: this.route });
}

Alternatively, you can explicitly indicate the route to navigate to using /categories:

edit(id: number) {
  this.router.navigate(['/categories', id]);
}