Aurelia child route navigation

Help Requests
1

Hy,

I have currently a problem with routing in my child routes :confused:. My correct project is built like this:

app.ts 
configureRouter(config: RouterConfiguration, router: Router) {
  config.map([
    {
      route: ["candidates"],
      name: "candidates",
      moduleId: PLATFORM.moduleName("pages/candidates/candidates-routes"),
      nav: true,
      activationStrategy: activationStrategy.replace,
    },
  ]);
  
  this.router = router;
}

In my candidates routes I have the following

candidates-routes.ts 
public configureRouter(config: RouterConfiguration, router: Router) {
  config.map([
    {
      name: "candidates",
      route: "",
      nav: false,
      title: "title",
      viewPorts: {
        mainContent: { moduleId: PLATFORM.moduleName("./candidates") },
      },
    },
    {
      name: "candidate-detail",
      route: [":id", ":id/:tab?"],
      moduleId: PLATFORM.moduleName("pages/candidates/candidate-detail/candidate-detail"),
      nav: false,
      title: "title",
      viewPorts: {
        mainContent: { moduleId: PLATFORM.moduleName("./candidate-detail/candidate-detail") },
      },
    },
  ]);

  this.router = router;
}

Now when I try to navigate to the named route candidate-detail I get problems. For example being inside the candidate-detail and calling this.router.navigateToRoute results in this url: localhost:8080/[id] but should actually be localhost:8080/candidates/[id]

Also when I call this.router.navigateToRoute("candidate-detail", { id }) from pages/search for example I get : A route with name 'candidate-detail' could not be found.

What am I doing wrong? Is there anything else which I should add here?
Thanks in advance for any help :hugs:

1 Like
2

There doesn’t seem to be anything wrong with it, and it’s not obvious how to reproduce your issue. It would be easier to guess if you could help create a repro of it using something like this https://codesandbox.io/s/046p43v7x0 or a normal sandbox https://codesandbox.io/s/y41qjr36j

3

Thanks for your reply @bigopon.
I created a github repo with some test code. Maybe it makes it clearer.

I added the instructions to the Readme-file.

1 Like
4

@bigopon did you already have time to take a look at it or is there something missing still?
Thanks in advance!

1 Like
5

@schnetzi The following is what I saw in my browser

image
image.png936×263 20.7 KB

URL seems like it matches what you described as desired behavior. Can you help clarify the issue, I think I might have misunderstood it.

1 Like
6

Ok sorry :slight_smile:
Looks good so far :sweat_smile: So the next steps would be:

  • click on Search
  • click on Candidate (not Candidates)

Do you get an error in your console?

1 Like
7

I see the issue. The router works with names by walking up the router tree and resolve the name. In your app, you have this router structure:

root-router(app-router)
|--Candidates
|-----Candidates-details
|--Search

When you are in search route, your router tree from Search would be root -> search, which means it has no knowledge of candidate-details route. You will probably need to navigate there by url instead of name.

This has been a requested feature for quite sometimes: ability to know all the routes in the routing table, but with lazy load nature of router, I think it’s not possible to know what route belong to which branch of the rotuter.

2 Likes
8

Thanks for the explanation! :slight_smile:
I was afraid that this is the reason but didn’t want to build the route by myself.

Is there any suggested way how the routing with the child-routes should be done (better) or is this the preferred way?

1 Like
9

Typically when starting a project, laying out the routing table and later add a helper to resolve them is good enough. Also, you don’t have to use child router, as candidate details and candidates can be on the same levels.

1 Like