Ember.JS: There is no route named blah

Question

I am getting this error:

Assertion Failed: You attempted to define a `{{link-to "companies.show"}}` but did not pass the parameters required for generating its dynamic segments. There is no route named companies.show

But I do have that route in router.js and is was working before I added two new routes along with a component for editing/adding records. But it is indeed gone right now - I can nav directly to it either. So I think I have an error in a different part of my that is dominoing into my route.

// router.js 
Router.map(function() {
  this.route('states');
  this.route('companyTypes');

  this.route('companies', function() {
    this.route('show', {path: '/:company_id'});
    this.route('new');
    this.route('edit', {path: '/:company_id'});
  });

  this.route('counties', {path : '/counties/:state'});
});

// routes/companies.js
export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('company');
  }
});

// routes/companies/show.js
export default Ember.Route.extend({
  model(params) {
    return this.get('store').findRecord('company', params.company_id);
  }
});

I am passing the model parameter in the link-to and the show route has its model hook.

Answer 1

Ok, so the problem was I duplicated the same route in router.js

// router.js
this.route('companies', function() {
    this.route('show', {path: '/:company_id'});
    this.route('new');
    this.route('edit', {path: '/:company_id'});
  });

Both show and edit have the same route: If you nav to http://localhost:4200/companies/1 are you supposed to go to show or edit? edit overwrites show because it comes last. Move show after edit:

// router.js
this.route('companies', function() {
    this.route('new');
    this.route('edit', {path: '/:company_id'});
    this.route('show', {path: '/:company_id'});
  });

And show starts working, but edit will break.

So you need to do something like this:

// router.js
this.route('companies', function() {
    this.route('new');
    this.route('edit', {path: '/edit/:company_id'});
    this.route('show', {path: '/:company_id'});
  });

Your routes are now:

http://localhost:4200/companies/1
http://localhost:4200/companies/edit/1