Home>

...

>

Modifying URLs With Nested Routes

Modifying URLs With Nested Routes

You’ll learn how to change URLs according to the requirements of the application in this lesson.

Changes in router.js

Here’s the command we used in Ember-CLI in the previous lesson:

ember g route bands/band --path=':id'

It generates the following code in router.js. The highlighted lines of code are the new generated code.

JavaScript (JSX)
// app/router.js
import EmberRouter from '@ember/routing/router';
import config from 'rarwe/config/environment';
export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}
Router.map(function() {
  this.route('bands', function() {
    this.route('songs');
    this.route('band', {
      path: ':id'
    });
  });
});

So, let’s fix this up to have the following shape:

The removed code is commented and the newly added code is highlighted.

JavaScript (JSX)
// app/router.js
import EmberRouter from '@ember/routing/router';
import config from 'rarwe/config/environment';
export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}
Router.map(function () { 
  this.route('bands', function () {
    //  this.route('songs');
     
    //  this.route('band', {
    //    path: ':id'
    this.route('band', { path: ':id' }, function () { 
      this.route('songs');
    }); 
  });
});

By defining a dynamic segment, one that starts with a :, as path, our router now maps every possible band URL to a route object in our application. With this in place, the following paths are all mapped:

  • /
  • /bands
...
Access this course and 1600+ top-rated courses and projects.