Route Not found error in Durandal child route

Question

I am getting "route not found" when I try to use child routing. To cover my bases, here is how the routing in the application is designed.

The main.js file contains routing for the top navigation and is done as-

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

I map routes for the footer of the page as-

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

When a user clicks on the 'LOC' route created above, the left nav is displayed on that view. That view uses the child routing and is set up 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 defaults to the LCClientSearch route and displays it correctly initially, HOWEVER, nothing right happens from that point on. When the user clicks on LCClientSearh or LCPending, I get 'route not found' error.

LOC view-

     <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 do I get route not found?

Answer 1

I suspect its because your parent route doesn't have a splat - check out the 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 }
]

That should then match the routes LOC/LCClientSearch and LOC/LCPending respectively.