Nested routes info and problem reproduction

I apologize in advance if I’m wrong to open the issue and I shouldn’t have done it here. But I think it really concerns the basics of Navaid.

I’m also ready to open and update a wiki page for all newcomers like me.

THE PROBLEM:

I started from svelte-demo (https://github.com/lukeed/svelte-demo) and I’m trying to use nested routes for a list/detail view.

REPRODUCTION: https://codesandbox.io/s/quizzical-dirac-2d0qy

To come to the problem you should:

• open the console from the tab on the bottom
• click on “Go to Teams Page”
• click on “Go to Team 1 Page” (or others)
• click on “Go to Team 1 Page” (or others) from the list
• as you can see in console until now just four messages from “App draw()” and one “PageTeamRoute draw()”
• now you can clear the console
• click on “Go to Player 1 Page” (or others) from the list
• you can see now the problem: 4 messages in console:

Why?

Am I correctly using Navaid with nested routes?

Is this correct in App.svelte?

.on("team/*", obj => draw(PageTeam, obj))

[lukeed]

Well, you also have two handlers defined for every team/* route.

Once in the App and once in the PageTeam

[lukeed]

Personally I would move everything up to the App router. Since you already have & known all the components ahead of time, to me, it doesn’t really make sense to sanction things off into units.

As of now, they’re all one App.

For me, the separate (sub)router approach make sense for when you are dynamically loading some variable set of widgets into your application, each of which will have their own routing needs. Aka, unknown, unrelated, and/or physically separate things. For example, in my mind, I’m thinking of a WordPress editor that loads in different content blocks from different authors, each of which has their own series of config/states tied to URL segments.

Since you’re developing all of this together, I would define the router together. Personally.

Now, after #12, you can keep this approach but remove team/* from App. That is the redundant one but still fires on every URL change within that namespace