route changes address but doesn't do anything

Question

Here are my routes.

export const routes: Routes = [
  { path: 'signin-callback', component: SigninCallbackComponent },
  {
    path: '',
    component: DatasetListComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'datasets',
        component: DatasetListComponent
      },
      {
        path: 'dataset/:datasetId',
        component: DatasetComponent
      }
    ]
  },
];

At /datasets the page loads and loads the list of datasets as expected.

A link

<a class="btn btn-primary" [routerLink]="['dataset', d.DatasetId]">

Updated the browser address -- complete with the id , but nothing happens.

What's going on?

Answer 1

The problem is children . Moving the route objects to be siblings of the parent level makes it work.