DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Ilya Radchenko
Ilya Radchenko

Posted on • Originally published at ilyaradchenko.com on

Ember's Nested Routes and URLs Explored

Ember's router is powerful and a bit unique, in that it has a nested structure for the routes which build up the URL a user would see in the browser.Given it's power, it is easy to be unsure about how to structure your routes, especially in scenarios where you have parent-child UI patterns or CRUD like resources.

One of the patterns that I've learned is not using extra nesting when want to build out a multi-part URL structure, like /users/1234, which seems like it should be nested, but generally a single level is enough. I'd structure it like this:

this.route('user', { path: '/users/:userId' });

This puts your user "view" route at the app/pods/user directory (my examples will use PODS, since they are sane for routes).The following is generally not the way I'd write my router map, even though it creates the same URL pattern.

this.route('users', function () {
this.route('user', { path: ':userId' });
});

Unless you are showing the list of users at the same time as the selected user, which I think is a rare pattern, this is probably not the way your route should work.The reason I wouldn't do this is because it adds unnecessary mental overhead between the list and a selected item from the list.With my preferred pattern, if I wanted a list route, it would be a sibling to the resources.

this.route('users');
this.route('user', { path: '/users/:userId' });

And the folder structure is sane as well:

app
pods
  users
  user

Since the two usually don't share any common UI, the common UI will probably be one route up or at the application route.Well that's it! Let me know if this is how you do it or if you completely disagree.

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›