Aurelia routing configuration issue

Question

I am having an issue with configuring Aurelia route when the path like layer1/layer2 not just layer1. Here is the project file structure (files under dist gets created automatically based on files under 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 like 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 chrome debugger, I see this error:

GET http://localhost:9000/user/dist/user/register.html 404 (Not Found)

Notice that somehow an extra user gets added to the url which causes not to be able find register.html file. Again, when I am just using user as route, it works fine without any error but when I just change from user to user/register, it doesn't work anymore.

Could someone please let me know why this is happening and how to fix it?

Answer 1

Change the href for the link to be href="#/user/register" and that should clear up the issue for you.

I didn't see that you had pushState enabled. Please edit your index.html and add

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

Or whatever your root url is. This should fix the issue for you.

Answer 2

I made a small change to Ashley's answer which makes little bit more environmentally friendly since we don't need to hard code local url. I tested it and works well too.

<base href="/">