Route No error found in the children's route Durandal

Question

I get a "route not found" when I try to use child routing. To cover my bases, here's how application routing is designed.

The main.js file contains routing for top navigation and runs as -

router.map([ { route: 'LOC', moduleId: 'LOC', title: 'LC', nav: 3 } ]); 

I map the routes for the page footer as -

  router.map('About', 'About', 'About', false); router.map('Help', 'Help', 'Help', false); 

When the user clicks on the “LOC” route created above, the left navigator is displayed on this screen. This view uses child routing and is configured as -

 var childRouter = router.createChildRouter() .makeRelative({ moduleId: 'viewmodels/', fromParent: true }).map([ { route: '*LCClientSearch', moduleId: 'LCClientSearch', title: 'Create LC', type: 'intro', hash: '#LCClientSearch', nav: true }, { route: '*LCPending', moduleId: 'LCPending', title: 'Pending LC', type: 'intro', hash: '#LCPending', nav: true } ]).buildNavigationModel(); 

LOC by default points to the LCClientSearch route and displays it correctly initially, HOWEVER, none of this happens. When a user clicks on LCClientSearh or LCPending, I get a "route not found" error.

LOC -

  <div class="span2 well"> <ul class="nav nav-list"> <li class="nav-header">Availability</li> <!--ko foreach: availability--> <li data-bind="css: { active: isActive }"> <a data-bind="attr: { href: hash }, text: title"></a> </li> <!--/ko--> <li class="nav-header">Manual Post</li> <!--ko foreach: ManualPost--> <li data-bind="css: { active: isActive }"> <a data-bind="attr: { href: hash }, text: title"></a> </li> <!--/ko--> </ul> </div> 

Why am I not getting the route not found?

Answer 1

I suspect your parent route does not have splat - check documentation for child routers . Try changing the route from the parent view to:

 router.map([ { route: 'LOC*details', moduleId: 'LOC', title: 'LC', nav: 3 } ]); 

And then change the child routes to:

 [ { route: 'LCClientSearch', moduleId: 'LCClientSearch', title: 'Create LC', type: 'intro', nav: true }, { route: 'LCPending', moduleId: 'LCPending', title: 'Pending LC', type: 'intro', nav: true } ] 

This should then correspond to the LOC/LCClientSearch and LOC/LCPending respectively.