# Is there a reason we can not have nested routes?
**URL:** https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845
**Category:** Uncategorized
**Created:** [July 17, 2013, 2:44pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845 "2013-07-17T14:44:14Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@cavneb](https://discuss.emberjs.com/u/cavneb)
#### Post date: [July 17, 2013, 2:44pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/1 "2013-07-17T14:44:14Z")
I spoke with Ryan Florence a bit yesterday about this topic so I know I’m not crazy in thinking that it should be possible. I have an app that has 3 layers of nested templates:
```
App.Router.map(function() {
this.resource('docs', function() {
this.resource('basics', function() {
this.route('index');
this.route('building_an_lti_app');
this.route('post_parameters');
this.route('other_resources');
});
});
```
The pages these are linking to are all static content pages. The _docs_ template provides a nav bar at the top and the _basics_ template offers a nav list on the side and is embedded in the _docs_ template.
After talking with Ryan for a bit, I understand that the point of a **resource** is that it represents data. However, in this example, I am not dealing with data.
Is there a reason we don’t have the ability to have nested routes? The concern I have here is my links now have to reference the resource closest to the route, which removes the _docs_ completely from the link.
For example:
```
{{#linkTo 'docs.basics.post_parameters'}}Click Me{{/linkTo}}
```
does not work when
```
{{#linkTo 'basics.post_parameters'}}Click Me{{/linkTo}}
```
does.
I know this topic has been discussed prior, and there are _workarounds_ for this… however is there a reason we don’t support nested routes? And if not, is this something we can add in the future?
Thanks!
---
### Author:  [@ryanflorence](https://discuss.emberjs.com/u/ryanflorence)
#### Post date: [July 17, 2013, 3:07pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/2 "2013-07-17T15:07:35Z")
The real issue is when you have a second set of nested routes that have the same “resource” name, even though its a not resource, its just a view hierarchy you want.
```nohighlight
this.resource('docs', function() {
this.resource('intro', function() {
this.route('a');
});
});
this.resource('tutorials', function() {
this.resource('intro', function() {
this.route('a');
});
});
```
Since resource resets the namespace, you can’t have an intro template for both docs and tutorials.
It would be nice to have nested routes so the namespaces don’t get reset, then you’d have ‘docs/intro.hbs’ and ‘tutorials/intro.hbs’.
Or, provide some configuration options to specify which objects to map too and break convention.
---
### Author:  [@machty](https://discuss.emberjs.com/u/machty)
#### Post date: [July 17, 2013, 4:28pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/3 "2013-07-17T16:28:42Z")
There’s been some talk about possibly making `this.route()` nestable, without flattening out the naming conventions. Seems like this in conjunction with making it possible to configure the expected generated class names would be a big win…
---
### Author:  [@ianstarz](https://discuss.emberjs.com/u/ianstarz)
#### Post date: [July 24, 2013, 7:34pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/4 "2013-07-24T19:34:06Z")
@machty from watching your presentation on the router facelift at the Boston meetup, this question was brought up and you distinguished between using nested routes vs. “unroutable substates” (i.e. modals, tabs, etc.) Is it the goal of Ember to make these substates routable? And if so would nested routes be the approach to tackle this problem?
---
### Author:  [@seilund](https://discuss.emberjs.com/u/seilund)
#### Post date: [July 24, 2013, 8:36pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/5 "2013-07-24T20:36:45Z")
I agree that it would be nice to be able to nest `route` calls. For now people can achieve the same by prefixing similar named routes with the parent route’s name. E.g. `docs.intro` and `tutorials.intro`:
```javascript
this.resource('docs', function() {
this.resource('docs.intro', function() {
this.route('a');
});
});
this.resource('tutorials', function() {
this.resource('tutorials.intro', function() {
this.route('a');
});
});
```
This works as expected. The name of the controller for `tutorials.intro.a` will be `App.TutorialsIntroAController`, and its template will be `tutorials/intro/a`.
---
### Author:  [@machty](https://discuss.emberjs.com/u/machty)
#### Post date: [July 25, 2013, 1:47pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/6 "2013-07-25T13:47:18Z")
Nice, I didn’t know about that trick.
---
### Author:  [@machty](https://discuss.emberjs.com/u/machty)
#### Post date: [July 25, 2013, 2:10pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/7 "2013-07-25T14:10:10Z")
@ianstarz Nestable `this.route()` would mainly be used to append to the existing namespace, rather than resetting it the way `this.resource()` does.
The syntax for non-routeable substates still needs to be discussed, as well as its implementation, but @lukemelia and I tossed around some possible ideas, such as
```
this.route('post', { states: ['saving', 'otherstate'] });
// which might be shorthand for
this.route('post', function() {
this.state('saving');
this.state('otherstate');
});
```
(Luke, apologies if I’ve butchered this)
But I think the idea is that you’ll have a `/post` URL which corresponds to the default state of the `post` route, and you can still do things like `transitionTo('post')`, but when, say, the user clicks the save button, you can `transitionTo('post.saving')` without changing any URLs, and the `PostSavingRoute` can handle events fired at that time, which you can use to, say, prevent transitions, put up loading spinners, etc., until the post has finished saving.
This could also be used for modals too. Keep in mind that launching a modal from a Route is something you can do today, it’s just that if you have modals with deeply nested outlets and so on, you can’t reuse the lovely router DSL to sketch out your modal, connect all the expected controllers, inject views into outlets, etc… So adding nestable `this.route` and `this.state` would get us closer to that goal.
---
### Author:  [@ianstarz](https://discuss.emberjs.com/u/ianstarz)
#### Post date: [July 25, 2013, 3:17pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/8 "2013-07-25T15:17:19Z")
@machty glad you and @lukemelia have been discussing this. Big +1 from me, as I feel like more than half the time in my applications I’m hand rolling state management for these types of substates. It would be cool if we could get these substates into the route somehow, as well. Obviously, `/post/saving` would not work with nested routes. But maybe something like `/post-saving` or `/post_saving` or some other convention? Going with the opinion that everything should be routable, it would be nice if you could share a page that retained “unroutable” substate.
---
### Author:  [@lukemelia](https://discuss.emberjs.com/u/lukemelia)
#### Post date: [July 25, 2013, 3:56pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/9 "2013-07-25T15:56:45Z")
@ianstarz IMO, everything should have a URL. Except things that shouldn’t have a URL. The transient state of saving a post is an example of something that shouldn’t have its own URL (What would it even mean to visit that URL? Would you save the post? With what data? When would it exit the route?)
It would certainly be useful to have the app behave contextually based on the fact that the post is being saved. My view is that URL-less substates would be an excellent way to do that elegantly.
---
### Author:  [@ianstarz](https://discuss.emberjs.com/u/ianstarz)
#### Post date: [July 25, 2013, 4:13pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/10 "2013-07-25T16:13:12Z")
@lukemelia Haha, I didn’t even realize what I was saying (was thinking about something I’ve been working on instead.) Yeah definitely the transient saving state you would never route to. I see the distinction you guys are drawing now. Definitely think that nested routes and substates are going to save a lot of people a lot of work. As long as you are a believer of routing everything you can, I trust you guys will come up with good solutions. I’ll keep an eye out for your proposals—would love to follow that work (and help out if at all possible.)
---
### Author:  [@seilund](https://discuss.emberjs.com/u/seilund)
#### Post date: [July 25, 2013, 6:47pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/11 "2013-07-25T18:47:04Z")
I see the point in sub states, but isn’t there easier ways to achieve something like preventing transitions while a record is saving? Using sub states you would need to define this behavior for all routes that need this behavior. Example:
```javascript
App.Router.map(function() {
this.resource('post', {path: '/posts/:post_id'}, function() {
this.state('saving');
});
this.resource('category', {path: '/category/:category_id'}, function() {
this.state('saving');
});
});
App.PostRoute = Ember.Route.extend({
events: {
save: function() {
var self = this;
this.transitionTo('post.saving');
this.get('model').commit().then(function() {
self.transitionTo('post');
});
}
});
App.PostSavingRoute = Ember.Route.extend({
events: {
willTransition: function() {
//Do some crazy logic to prompt the user if he wants to discard changes
}
}
});
App.CategoryRoute = Ember.Route.extend({
events: {
save: function() {
var self = this;
this.transitionTo('post.saving');
this.get('model').commit().then(function() {
self.transitionTo('post');
});
}
});
App.CategorySavingRoute = Ember.Route.extend({
events: {
willTransition: function() {
//Do some crazy logic to prompt the user if he wants to discard changes
}
}
});
```
Notice how the logic in `App.PostSavingRoute` and `App.CategorySavingRoute` is the exact same.
You might as well define an `App.SaveAwareRoute` that your `post` and `category` routes extend from:
```javascript
App.Router.map(function() {
this.resource('post', {path: '/posts/:post_id'});
this.resource('category', {path: '/category/:category_id'});
});
App.SaveAwareRoute = Ember.Route.extend({
events: {
willTransition: function() {
if (!this.controller.get('isSaving')) {
//Bubble transition if we're not saving
return true;
}
//Do some crazy logic to prompt the user if he wants to discard changes
}
}
});
App.PostRoute = App.SaveAwareRoute.extend({
events: {
save: function() {
var self = this;
this.set('isSaving', true);
this.get('model').commit().then(function() {
this.set('isSaving', false);
});
}
}
});
App.CategoryRoute = App.SaveAwareRoute.extend({
events: {
save: function() {
var self = this;
this.set('isSaving', true);
this.get('model').commit().then(function() {
this.set('isSaving', false);
});
}
}
});
```
This way the “prompt user before transitioning if saving” logic is centralized in one place. And your `App.Router.map` code looks more lean.
In which other cases would you use sub states?
---
### Author:  [@machty](https://discuss.emberjs.com/u/machty)
#### Post date: [July 30, 2013, 3:34pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/12 "2013-07-30T15:34:21Z")
This is a start that will lead to `this.state`, would appreciate your comments/ideas: [https://github.com/emberjs/ember.js/pull/3069](https://github.com/emberjs/ember.js/pull/3069)
---
### Author:  [@seilund](https://discuss.emberjs.com/u/seilund)
#### Post date: [July 30, 2013, 4:24pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/13 "2013-07-30T16:24:43Z")
@machty This is definitely a good addition. I don’t see any reason why it shouldn’t be allowed to nest `this.route` calls, and newcomers often stumble over this issue.
Does this mean that the only difference between `this.resource` and `this.route` will be that the former resets the path name?
---
### Author:  [@machty](https://discuss.emberjs.com/u/machty)
#### Post date: [July 30, 2013, 4:37pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/14 "2013-07-30T16:37:58Z")
@seilund correct. It’s also paving the way to route-less substates, which I’m working on now.
---
### Author:  [@seilund](https://discuss.emberjs.com/u/seilund)
#### Post date: [July 30, 2013, 4:39pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/15 "2013-07-30T16:39:33Z")
By adding a `this.state()` method or how?
---
### Author:  [@machty](https://discuss.emberjs.com/u/machty)
#### Post date: [July 30, 2013, 4:46pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/16 "2013-07-30T16:46:55Z")
Yeah that’s what I had in mind, at least at first.
---
### Author:  [@eccegordo](https://discuss.emberjs.com/u/eccegordo)
#### Post date: [July 31, 2013, 11:45pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/17 "2013-07-31T23:45:54Z")
Excuse my naiveté, but does this approach have any unanticipated consequences when using Ember Data? Just curious. Have been trying to grok the best way to do deeply nested resources.
---
### Author:  [@seilund](https://discuss.emberjs.com/u/seilund)
#### Post date: [July 31, 2013, 11:57pm UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/18 "2013-07-31T23:57:44Z")
Not that I know of. But I haven’t used it extensively. As long as your “object routes” have `/:model_id` segments in them, single models will automatically be loaded no matter that name of the route.
---
### Author:  [@eccegordo](https://discuss.emberjs.com/u/eccegordo)
#### Post date: [August 1, 2013, 12:06am UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/19 "2013-08-01T00:06:39Z")
Ryan, thanks for this post. I have been struggling quite a bit trying to understand why my nested routes weren’t working as expected. But your comment “resource resets the namespace” now makes a lot of sense. It would be nice if this was explicitly documented in the user guide. Perhaps an updated screen cast talking about this issue would help a lot of new users trying to get their heads around nested routing. Your screencast at [http://ember101.com/videos/007-nested-routes](http://ember101.com/videos/007-nested-routes) is quite good but the nuance in this thread really helps clarify the issue.
---
### Author:  [@vanthome](https://discuss.emberjs.com/u/vanthome)
#### Post date: [September 8, 2013, 10:22am UTC](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845/20 "2013-09-08T10:22:44Z")
I also had the requirement to have simple nested routes in the path. For example think about an administration area of a fairly complex area and you just want to separate aspects by corresponding routes like
```
/settings/application/i18n
/settings/application/currencies
/settings/users/defaults
/settings/users/authentication
...
```
Having repeatedly problems to model such cases brought to to the point that I only use resource based routes because I don’t need to think about how and whether I can achieve what I want.
[Next page](https://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845.md?page=2)