Problem getting my head around child routers

Help Requests
1

NOTE: I figured out what was wrong with my understanding, so basically this post should be deleted…which I unfortunately cannot do.

I am trying to achieve something, that I believe should be fairly simple. (Note: I am new to Aurelia and totally love the nice structure it provides.)

The default page in my app is a search page. Search input field at the top and list of search results below.

I have constructed this with an ‘app.html’ view with a <router-view></router-view> element. The router config looks like this:

config.map([
{ route: ‘’, moduleId: ‘search’, nav: true },
{ route: ‘result-details’, moduleId: ‘search’, nav: true }
]);

The ‘search.html’ view also has a <router-view></router-view> element and the child router has this configuration:

config.map([
    { route: '', moduleId: 'results', nav: true },
    { route: 'result-details', moduleId: 'result-details', nav: true }
]);

When I hit the URL: http://localhost:9000/# all is fine. I can type in search phrases and get the results.

The problem occurs, when I want to display result details. Basically I want to be able to navigate from a specific search result to a result details view. I want the list of results to be replaced with a new layout displaying the details for one result - thus replacing the content of the <router-view></router-view> element on the ‘results.html’ view with the content of the ‘result-details.html’ view.

I thought that hitting the URL: http://localhost:9000/#/result-details would do this (never mind the details with parameters for specific search results - for now I just need to see the sub-view being replaced with another). I was assuming that first the app router is checked for a match, which is found, and then the child router is checked for a match, but is seems the matching stops with the match found at the root.

This ‘test’ seems to confirm the behaviour. If I change the configuration of the child router to:

config.map([
    { route: '', moduleId: 'results', nav: true },
    { route: 'result-details', moduleId: '**illegal name**', nav: true }
]);

Note the illegal moduleId. Then a hit of http://localhost:9000/#/result-details doesn’t generate an error.

Any explanations or a better way to structure the app to change the content of the <router-view></router-view> on the ‘results.html’ view?

Thanks!

2

Instead of deleting, how about following up with your own post showing how you fixed it? It might be helpful for others in the future :smiley:

3 Likes
3

You are totally right!

Basically I found the missing information in the Pluralsight material “Aurelia Fundamentals” by Brian Noyes. Here there is a good explanation of routers and child routers.

The thing I hadn’t realized, was that the routers match URL fragments in the hierarchy of the routers themselves, i.e. the Root router matches the first part of the URL and once there is a match the remainder of the URL is matched by the child router. So basically my code worked, I simply didn’t specify the URL correctly. Once I specified http://localhost:9000/#/result-details/result-details it worked. So the Root router first matched ‘result-details’ and then the child router matched the last ‘result-details’ in the URL.

Obviously not a nice naming, so I have now changed the routing to http://localhost:9000/#/home/result-details.

1 Like