# Configured router

**URL:** <https://discourse.aurelia.io/t/configured-router/4511>\
**Category:** vNext\
**Created:** [December 17, 2021, 3:21pm UTC](https://discourse.aurelia.io/t/configured-router/4511 "2021-12-17T15:21:35Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![jrl](https://avatars.discourse-cdn.com/v4/letter/j/fbc32d/32.png) [@jrl](https://discourse.aurelia.io/u/jrl)\
**Post date:** [December 17, 2021, 3:21pm UTC](https://discourse.aurelia.io/t/configured-router/4511/1 "2021-12-17T15:21:35Z")

</div>

I can’t seem to figure out how the routing model is supposed to work. While routing works and I can configure routes, I have no idea how to manage and render the navigation tree.  
In Au1 I had an auxillary structure, that basically managed state and allowed for a global tree menu. I was hoping something along those lines would be implemented OOTB in vnext. Something like the following:

**root-component** :

```auto
@routes({
    {
       {
            path: ['', 'page1'],
            component: () => import('./page-one'), // lazy
            title: 'p1'
        },
        {
            path: ['page2'],
            component: () => import('./page-two'), // lazy
            title: 'About'
        },
	[...]
    }
})
export class Root [...]

```

**nav-component.ts** :

```auto
@inject(IRouteContext)
export class NavComponent {

    constructor(private routeContext: IRouteContext) {}
[...]

```

**nav-item.html** :

```auto
<nav-item repeat.for="promise of routeContext.childRoutes" deferred.bind="promise"></nav-item>

```

`Nav-item` would then resolve the promise to a RouteConfig and render title etc. However, RouteConfig has no info on the router state, e.g. is it active or not? I could use the `IRouterEvents` to get some info, but there’s no reference to the id of the current route AFAIK, so its hard to link together without simply comparing URL’s.  
Anyways, I doubt that this is the ‘correct’ way of handling this. In the docs ([docs.aurelia.io](http://docs.aurelia.io)) there’s a short example;

```auto
<a active.class="_settings" load="route:settings; active.bind:_settings">
    Settings
</a> 

```

But I don’t really get the binding here, what model is being bound to? Is it a `RouteNode`? How would I get that after configuring the router? Any help or clarification would be highly appreciated.