Angular routing confusion/strange behavior

I have a base route with three sibling routes. The parent route routes to my task-list.component.ts which contains a navbar and router outlet.

I would like to have a route param on the base route where I can add an optional token

so when I navigate to http://localhost:4200 token should be undefined.

when I navigate to http://localhost:4200/123 token should be 123 in the activated route params

I have the below route config but i'm encountering confusing/strange behaviour.

When I navigate to http://localhost:4200 I get to my base taskList.component as expected.

When I try navigate to http://localhost:4200/123 I get a 404 not found? The expected bahaviour is that this should have navigated to taskList.component and added 123 to the activated route params...

even more strange when I click the deleted link in my navbar it navigates to the parent component app.component again only then I get "deleted" as the value in the activated route params...

Even more strange: when I navigate to http://localhost:4200 using my browser it doesn't set deleted as token instead I get a 404 not found again...

Any idea how I can achieve the above/what my issue might be?

my route module code:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { TaskListComponent } from './task/task-list/task-list.component';
import { CompletedTasksComponent } from './task/completed-tasks/completed-tasks.component';
import { DeletedTasksComponent } from './task/deleted-tasks/deleted-tasks.component';


const routes: Routes = [  
  { path: '', component: TaskListComponent, pathMatch: 'full' },
    { path: ':token', component: TaskListComponent },    
    { path: ':token/completed', component: CompletedTasksComponent },
    { path: ':token/deleted', component: DeletedTasksComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

from Angular routing confusion/strange behavior