Nested Routes / Index

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('items', function() {
		this.route('index', { path: '/' }, function() {
			this.route('track');
      this.route('review');
    });
   this.route('settings');
  });
});

export default Router;

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.active {
  font-weight: 800; 
}

templates.application.hbs

<h1>Application</h1>
<br>
<br>
<ul>
  <li>
  	{{#link-to 'items'}}Items{{/link-to}}
  </li>
  <li>
  	{{#link-to 'items.index'}}Items - Index{{/link-to}}
  </li>
  <li>
  	{{#link-to 'items.settings'}}Items - Settings{{/link-to}}
  </li>
  <li>
  	{{#link-to 'items.index.track'}}Items - Track{{/link-to}}
  </li>
  <li>
  	{{#link-to 'items.index.review'}}Items - Review{{/link-to}}
  </li>
</ul>
<br>
{{outlet}}
<br>
<br>

templates.items.hbs

<div style="background-color: hsl(30,30%,80%); padding: 10px; margin: 10px; border-radius: 10px;">
	<h3>Items</h3>
  {{outlet}}
</div>

templates.items.index.hbs

<div style="background-color: hsl(60,30%,80%); padding: 10px; margin: 10px; border-radius: 10px;">
	<h3>Items - Index </h3>
  {{outlet}}
</div>

templates.items.index.review.hbs

<div style="background-color: hsl(120,30%,80%); padding: 10px; margin: 10px; border-radius: 10px;">
	<h3>Items - Review</h3>
  {{outlet}}
</div>

templates.items.index.track.hbs

<div style="background-color: hsl(120,30%,80%); padding: 10px; margin: 10px; border-radius: 10px;">
	<h3>Items - Track</h3>
  {{outlet}}
</div>

templates.items.settings.hbs

<div style="background-color: hsl(90,30%,80%); padding: 10px; margin: 10px; border-radius: 10px;">
	<h3>Items - Settings</h3>
  {{outlet}}
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}