:id Route overwrites others

Question

I have the following routes:

const routes: Routes = [

  { path: '', component: UserComponent, children: [
      { path: '', component: LoginComponent },
      { path: 'signup', component: SignupComponent }
    ]},
  { path: 'dashboard', component: MainComponent, children: [
      { path: '', component: DashboardComponent, children: [
          { path: '', redirectTo: '0', pathMatch: 'full' },
          { path: '0', component: NoListComponent },
          { path: ':id', component: ListComponent },
        ]},
      { path: 'createlist', component: CreateListComponent },
      { path: 'create', component: CreateTaskComponent }
    ]},
];

Somehow when I call routerLink="dashboard/create" or routerLink="dashboard/createlist", the ListComponent (:id) is being displayed with no content, but not CreateListComponent or CreateTaskComponent.

Answer 1

The above answers are right, I just wanted to clarify one thing. When it comes to route the order matters. So you need to put /createlist and /create before :id

{
  path: 'dashboard', component: MainComponent, children: [
    {
      path: '', component: DashboardComponent, children: [
        { path: '', redirectTo: '0', pathMatch: 'full' },
        { path: 'createlist', component: CreateListComponent },
        { path: 'create', component: CreateTaskComponent },
        { path: '0', component: NoListComponent },
        { path: ':id', component: ListComponent }
      ]
    },

  ]
},

If you put them after :id it will override them because, :id will match any nested route that comes after /dashboard