Non-root routes pass requests to server

[mnquintana]

So I'm pretty sure this has to be something I'm doing wrong, but I haven't quite found it. I'm currently using just ampersand-router in an app - no other ampersand dependencies. I have something like this happening (vastly simplified):

import ampRouter from 'ampersand-router'

let Router = ampRouter.extend({
  routes: {
    '': 'home',
    'reset': 'reset'
  },
  home: function () {
    console.log('Home!')
  },
  reset: function () {
    console.log('Reset!')
  }
})

class Application {
  constructor() {
    // A bunch of other stuff is instantiated
    this.router = new Router()
    this.router.history.start({
      pushState: true
    })
  }
}

// Global for example purposes
window.app = new Application()

Navigating to the root route ('') calls the home handler as expected, but navigating to /reset sends the request to the server (which in this case returns a 404). Navigating to /#reset calls the reset handler as expected (and ampersand-router rewrites the URL as /reset, as expected). Why are non-hash, non-root routes routing to the server instead of routing to the ampersand-router?

(Also of note is that in both of the above cases, each handler is called twice - not sure what's going on there either)

[wraithgar]

How are you navigating? Are these calls to router.navigate or are they via a click events or what?

[mnquintana]

In this case I was just testing navigation by entering URLs in the browser.

[kamilogorek]

@mnquintana this is expected behaviour then. When you enter url in the browser, then request will always be send and handled by server itself. To solve it, you have to modify your server to use wildcard route, catch all requests and always send back your index.html file.

[mnquintana]

Thanks @kamilogorek! I thought that's what I had to do, but I think what threw me was that I couldn't find the wildcard route anywhere in the sample app's routes yesterday - now I see that it's in the moonboots config. Thanks again! :beers: