Routing back to parent from child pages

1

I am having trouble getting the router working in v2 beta

I have a menu component in the root app.html component.
app.ts has a routes: IRoute configuration.

menu.html has a list ( ul li ) of links with load=“path1”, load=“path2” etc.
This is all working as expected.

However when I am in a child component of path1 with a child paths I cannot go back to the parent element by clicking on the path1 link in menu.html.

I can create a link on the child path with load=“…/”, that works.
And I can click on other links in the main menu, path2 or path3. that works.

Anybody has a tip for me? I am been going in circles trying all kinds of different combinations of configurations.

2

If this is router, try adding the router configuration additiveInstructionDefault: false.

3

thanks @jwx

I am using ‘@aurelia/router’ from the v2 beta.
I tried using additiveInstructionDefault: false

That definitely changed the behavior. But now when I click the parent menu item from a child it loads the parent component but with an empty au-viewport. Even if I explicitly set a fallback on the viewport it is still empty. There is no error in the console either.

Do I need to explicitly set something else if I set additiveInstructionDefault to false?

4

Did you set the fallback or the default property on the au-viewport?

5

I just tried the default property. Same issue.

In general it always seems to me that the router is brittle. I am never sure if I am doing things right, the examples are very simple and do not extend to my use cases. As soon as I have components with child routes, things don’t seem to work. ( its probably something on my end that I am not seeing / understanding though )

I will put together a minimal project to test. I am sure I am doing something wrong somewhere.

6

Feel free to use this as a starting template for creating a sharable example.

7

Here’s my minimal repo on github:

Thanks @ivan, i was looking for something like that before. I will move my github version to your template on stackblitz.

8

Here is a StackBlitz example ( forked from @Ivans link above )

The problem that I am having is that I would expect the main menu’s “Artist” link, to take the user to the Artist List page when the user is currently on the Artist Detail page.

to illustrate:

  1. click on the “Artists” link in the top menu
  2. click on either of the two artists to get to the artist detail page
  3. click on the “Artists” link in the top menu again. ( nothing happens )
9

changing this:

<a load="artists">Artists</a>

to

<a load="artists/list">Artists</a>

seems to fix it.

10

It does navigate back correctly, but I loose the “active” state on the menu navigation element.

The menu item with the load=“artists/list” no longer “knows” that it is the active parent element of the child pages.

11

For anyone else with similar issues here is my quick fix.

as @ivan above suggests I am linking directly to the child page in the menu’s parent link.

<a load="artists/list">Artists</a>

The in the menu.ts I inject and use the EventAggregator to track the active router path. Like this:

export class Menu {

    root: string;
    firstLevel: string;
    parts: string[] = []

    constructor(@IEventAggregator readonly ea: IEventAggregator) {}

    bound() {
        this.ea.subscribe('au:router:navigation-end', (payload) => {
            const path = getSafe(payload, 'navigation.path')
            if (path) {
                this.parts = path.split('/').filter((elem) => elem !== "")
                this.root = this.parts[0]
                this.firstLevel = this.parts.length > 1 ? this.parts[1] : undefined
            }
        })
    }

}

In the template I can now compare the navigation elements to the current root and firstLevel path entries:

<a load="artists/list" class="${root == 'artists' ? 'active-menu-item':''}">Artists</a>
1 Like