Child Router Navigation: Route not found:

[shivajiraot]

Below are my views:
app - standard
home - Has a list of items on left, on selection of any, will display some content on the right side in router-view (contract-view to be loaded).
contract-view

app.ts: route Config:

configureRouter(config: RouterConfiguration, router: Router) {
        config.title = 'Contracts Portal';
        config.map([
            { route: ['', 'home'], name: 'home', moduleId: 'home', nav: true, title: 'Home' },
            { route: 'resources', name: 'resources', moduleId: 'resources', nav: true, title: 'Resources' },
            { route: 'tools', name: 'tools', moduleId: 'tools', nav: true, title: 'Tools' }
        ]);
        this.router = router;
    }

Home.ts Router Config:

configureRouter(config: RouterConfiguration, router: Router) {
        config.title = "test";
        config.map([
            { route: ['', 'contract-view/:id'], name: 'contract-view', moduleId: 'contract-view', nav: true, title: 'Test' } 
        ]);
        this.router = router;
    }

on selection of a item in home page list, I am trying to navigate as below, in home.ts:

this.router.navigateToRoute("contract-view", { id: 4090 });

However it throws the error: Route not found: /contract-view/4090

At this point, it's still home page and default route, hence the url reads: http://localhost:9000/#/
and so it fails.
But, if I manually change the url to http://localhost:9000/#/home and then select a list item, navigation to contract-view works.
What I am I missing here?

I am looking for absolute path navigation. Tried navigating to 'home/contract-view' but fails with error:
A route with name 'home/contract-view' could not be found. Check that name: 'home/contract-view' was specified in the route's config.

[shivajiraot]

@bryanrsmith , @EisenbergEffect Help please!

[bryanrsmith]

URL generation doesn't properly handle arrays of patterns. Try splitting out the default route pattern '' into a separate route from 'contract-view' so that the named route has only one pattern. There is an issue open for this in the router repo.

Sorry for the delayed response. I don't get notifications on this repo.

[shivajiraot]

@bryanrsmith you mean like this, in home.ts?

            { route: '', name: 'users', moduleId: 'users',href:'users',  nav: true, title: 'Test' },
            { route: 'contract-view/:id', name: 'contract-view', href:'contract-view', moduleId: 'contract-view', nav: true, title: 'Contract' }
}

This doesn't seem to help my case.

[shivajiraot]

To clarify, when I changed to the above and by doing,

this.router.navigate("home/contract-view/"+this.selectedItem.id);

It works the first time when I click on a item in the list, but for all next item selections, it throws the same "Route not found home/contract-view/4094", because, as I understand, it is trying to navigate relative to the already existing path of home/contract-view/4090 instead of replacing it.

[bryanrsmith]

I may have misunderstood you. It sounds like you might be running into this issue: aurelia/router#27. Is that right?

[shivajiraot]

Looks like that's the one. Any solution/workaround?
To put simply, I have a home page (also, default route) with a child route in it. When navigating to that child route, navigation fails, unless I append "/home" to the url manually and then navigate.

[bryanrsmith]

I think the only workaround is using a redirect from '' to '/home'.

[EisenbergEffect]

Closing as a duplicate to aurelia/router#27.

[abhishekbhalani]

I am getting error with Router.
Create simple html and ts to test but not working.

please help.

import {Router,RouterConfiguration} from 'aurelia-router';
export class App {
  router:Router;
  message = 'Hello World!';

  configureRouter(config:RouterConfiguration,router:Router):void
  {
    config.title='Aurelia Router';
    config.options.root='/';
    config.map([ 
{
  route:'home',
  name:'home',
  moduleId:'./home/',
  mav:true,
  title:'Home'
},
{
  route:'about',
  name:'about',
  moduleId:'./about/',
  mav:true,
  title:'about us'  
}
    ]);
    this.router=router;
  }
}

[AshleyGrant]

You don't have any routes that map to / in your route config.