Why do I need to define an index route in Ember.js?

ember.js, javascript, routes

Solution

When a `route` has nested `route`s, it is assumed that there is an `index` route for the parent. This refers to this in the guide: https://guides.emberjs.com/v2.13.0/routing/defining-your-routes/#toc_index-routes

In particular, the key phrase is:

At every level of nesting (including the top level), Ember automatically provides a route for the / path named index. To see when a new level of nesting occurs, check the router, whenever you see a function, that's a new level.

So, in your example, because `room` is nested within `username`, then `username` gets an automatic `index` route. When you removed `room` from the nesting, then the default `index` route for `username` went away.

FYI, you don't even have to specify the index route, just supply an empty callback. e.g.:

this.route('username', {
    path: '/:username'
  }, function() {});

This will work the same way by automatically creating the `username/index` route.

In one of my early Ember apps (1.x), I wanted the index route to always be there, regardless (for consistency), so I defined a variable:

var NO_CHILDREN= function() {};

Then I could write my routes like:

this.route('username', {
    path: '/:username'
  }, NO_CHILDREN);

Hope that helps

Problem

Previously, my routes were defined: ``` this.route('username', { path: '/:username' }, function() { this.route("room", { path: "/:room", }); ``` I changed it to: ``` this.route('username', { path: '/:username' }, function() { this.route('index') }); this.route("room", { path: "/:room" }); ``` This works fine. But my `username/index` route will not load unless I explicitly define index in `router.js`. The following will not work: ``` this.route('username', { path: '/:username' }); this.route("room", { path: "/:room", }); ``` Is this normal behavior?

Original source