Router scopes and child routes

vNext
1

I have the following routing structure.

Main router options

useUrlFragmentHash: true

Main router

{ path: 'child-01', ... },
{ path: 'child-02', ... }

Child-01

{ path: 'home', ... },
{ path: 'dashboard', ... }

Child-02

{ path: 'home', ... },
{ path: 'dashboard', ... }

Now when I open a new browser window and go to #/child-01/home or #/child-02/home the correct page is shown.

But if I am currently on #/child-01/home and want to navigate to #/child-02/home say using <a load="#/child-02/home"> I get an error in the console.

Error: 'home' did not match any configured route or registered component name - did you forget to add the component 'users' to the dependencies or to register it as a global dependency?

What am I doing wrong? Do all routes need a unique path value?

Here is a simple live demo: Aurelia 2 Router Test 03 - StackBlitz

router sketch

On first load if you navigate to Child 01 - Home everything works as expected. But if you then navigate to Child 02 - Home this error pop up in the console.

Uncaught (in promise) Error: 'home' did not match any configured route or registered component name - did you forget to add the component 'home' to the dependencies or to register it as a global dependency?

Same thing if it’s done the other way around on a freshly loaded instance. First navigate to Child 02 - Home - everything works. But if you then navigate to Child 01 - Home the same error pop up in the console.

2 Likes