Aurelia routing configuration problem

Question

I had a problem setting up an Aurelia route when a path like layer1 / layer2 is not just layer1 . Here is the structure of the project file (files under dist are created automatically based on the files in the src folder)

dist | - home | - home.html | - home.js | - user | - register.html | - register.js app.html app.js main.js src | - home | - home.html | - home.js | - user | - register.html | - register.js app.html app.js main.js 

When I do the following, it just works fine:

app.html

 <template> <div> <a href="user">register user</a> <a href="otherlink">otherlink</a> </div> <div class='main'> <router-view></router-view> </div> </template> 

app.js

 this.router.configure(config => { config.title = 'demo'; config.options.pushState = true; config.map([ // home routes { route: ['','home'], moduleId: './home/home', nav: true, title:'Home' }, // User register { route: ['user'], moduleId: './user/register', nav: true, title:'Register User'} ]); }); 

But when I change the path from user to user / register as shown below, it no longer works

app.html

 <template> <div> <a href="user/register">register user</a> <a href="otherlink">otherlink</a> </div> <div class='main'> <router-view></router-view> </div> </template> 

app.js

 this.router.configure(config => { config.title = 'demo'; config.options.pushState = true; config.map([ // home routes { route: ['','home'], moduleId: './home/home', nav: true, title:'Home' }, // User register { route: ['user/register'], moduleId: './user/register', nav: true, title:'Register User'} ]); }); 

And in the chrome debugger, I see this error:

GET http: // localhost: 9000 / user /dist/user/register.html 404 (not found)

Please note that in some way an additional secondary user is added to the URL, which does not allow to find the register.html file. Again, when I just use user as a route, it works fine without any error, but when I just change from user to user / register it no longer works.

Can someone please tell me why this is happening and how to fix it?

Answer 1

Change href for the link href="#/user/register" and this should fix the problem for you.

I have not seen that you have pushState enabled. Change your index.html and add

 <base href="http://localhost:9000/"> 

Or whatever your root url is. This should solve the problem for you.

Answer 2

I slightly modified Ashley's answer, which makes it a little more environmentally friendly, since we do not need to hardcode the local url. I tested it and worked well.

 <base href="/">