Interesting routing path name ../

Frontend Web Development: The Big Nerd Ranch Guide Chapter 24: Controllers
1

I noticed that when the user selects a Cryptid on the Crytids page, the url goes to

http://localhost:4200/cryptids/

however when selecting a sighting, it goes to

http://localhost:4200/sighting/sightings/

when the router.js file has the routes showing

  this.route('sightings', function() {
    this.route('new');
  });

  this.route('sighting', function() {
    this.route('index', {path: "sightings/:sighting_id"});
    this.route('edit', {path: "sightings/:sighting_id/edit"});
  });

  this.route('cryptids');
  this.route('cryptid', {path: 'cryptids/:cryptid_id'});

However, I would like for it to be consistent as in

http://localhost:4200/sightings/

when showing or editing the sighting detail.

The fix was to add ‘…/’ to the sighting index and edit paths and go parallel a route to the sightings route. (If that’s the correct terminology.)

  this.route('sightings', function() {
    this.route('new');
  });

  this.route('sighting', function() {
    this.route('index', {path: "../sightings/:sighting_id"});
    this.route('edit', {path: "../sightings/:sighting_id/edit"});
  });

  this.route('cryptids');
  this.route('cryptid', {path: 'cryptids/:cryptid_id'});