Angular. Route relative to object id: how to do it if the component is showed with two URL?

Question

My problem is the following one. Here's my route:

const routes: Routes = [
  { path: 'tasks', component : TodoListComponent},
  { path: 'tasks/:id', component : SingleTaskComponent},
  { path: '', component : TodoListComponent},
];

When I navigate from url/tasks to url/tasks/id, everything works well. But when I do it from url/, it doesn't work (obviously) because it redirect to url/id because there is this button in the TodoListComponent template :

<a [routerLink]="id">Edit</a>

Do you know how could I manage that ?

Thanks

Answer 1

Use redirectTo option:

const routes: Routes = [
  {path:'', redirectTo: 'tasks', pathMatch:'full'}
  { path: 'tasks', component : TodoListComponent},
  { path: 'tasks/:id', component : SingleTaskComponent},
];