I feel as though similar questions have already been asked, but I have been unable to find my answer.

I'm trying to segregate my application by its features. Ideally each feature would be able to setup its own routing as well and Aurelia's child-router functionality seemed to be the perfect fit, but I'm having trouble getting it to work.

The structure of the application is as such:

```
app.ts
app.html
  /lectures
    list.ts
    list.html
    details.ts
    details.html
    index.ts
    index.html

```

I can include any of the other files if needed to answer the question, but have tried to keep the question as compact as possible. The `app.html` and `lectures/index.html` files both only contain `<template><router-outlet></router-outlet></template>`.

I have `app.ts`:

```
import { Router, RouterConfiguration } from 'aurelia-router';

export class App {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.options.pushState = true;
    config.map([
      {
        moduleId: './public-site/lectures',
        name: 'lectures',
        nav: true,
        route: ['', 'lectures/:id?'],
        title: 'Lectures'
      }
    ]);
  }
}

```

`lecture/index.ts`

```
import { Router, RouterConfiguration } from 'aurelia-router';

export class Index {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.options.pushState = true;

    config.map([
      { route: '', moduleId: './list' },
      { route: ':id', moduleId: './details' }
    ]);
  }
}

```

and then I have `lectures/details.ts`

```
import { NavigationInstruction, RouteConfig, RoutableComponentActivate } from 'aurelia-router';

export class LectureDetails implements RoutableComponentActivate {
  activate(params: any, routeConfig: RouteConfig, navigationInstruction: NavigationInstruction): Promise<any> {
    debugger;
  }
}

```

and `lecture\list.html`

```
<template>
        <div repeat.for="lecture of lectures" class="grid-body-cell" click.delegate="navigateToLecture(lecture)">
          ${lecture.title}
        </div>
</template>

```

`lecture\list.ts`

```
import { autoinject } from 'aurelia-framework';
import { Router } from 'aurelia-router';

@autoinject()
export class LecturesList {
  constructor(private router: Router) {}

  navigateToLecture(lecture: {id:number}) {
    this.router.navigate(`#/lectures/${lecture.id}`);
  }
}

```

When the app loads, it correctly navigates and displays the list page, but when I click on any of the lectures in the grid, the url updates to /lectures/1, but my debugger statement never gets hit. I can't figure out what I'm doing wrong.

What seems to be happening is that, while the url gets updated, the router is still directing the application to the list component. Is there a way to get the router to honor and pass on the parameter to the child router?

How do I need to update my setup to get the child router to work with the parameter?