EmberJS nested dynamic routes don't redirect as expected

Using Ember 2.17.0, I can't seem to get routes nested under other dynamic routes to load properly.

With the following file structure I'd like the stacks route to load a new page.

features/instances/
├── edit
│   ├── route.js
│   └── template.hbs
├── index
│   ├── route.js
│   └── template.hbs
├── new
│   ├── route.js
│   └── template.hbs
└── view
    ├── route.js
    ├── stacks
    │   ├── route.js
    │   └── template.hbs
    └── template.hbs

The URL for the stacks endpoint looks like /instances/view/91467053-ba03-33b9-8950-83f0e64b4688/stacks/123456

Where 123456 is the ID of the stack model. However at the moment when I trigger the link above the page doesn't reload and I'm still on the view route. If I put a tag into the view template, the content of the stacks is rendered there. But I want it on it's own page...

My router.js

Router.map(function () {
  this.route('instances', function () {

    this.route('view', {path: '/view/:instance_id'}, function () {
      this.route('stacks', {path: '/stacks/:stack_id'});
    });

    this.route('edit');
    this.route('new');
    this.route('all');

  });
  this.route('error');
});

What have I done wrong here? I can't find much about nested dynamic routes for ember 2.0+