How to reuse router paths

Design
1

I have a component ‘C0’ with a complex tabbed interface. When i use it as child of another component ‘C1’, i defines the routes for each of the tabs of ‘CO’ as child of ‘C1’.

However, now I need to show this component elsewhere too as child of a another component ‘C2’. Do I now need to literally copy/paste my router paths to also make them child of ‘C2’?

Each time i add another tab to ‘C0’, i have to add another route to both ‘C1’ and ‘C2’!

How does this scale as ‘C0’ gets more complex and hierarchical?

2 
function registerCRoutes() {
  this.route('foo');
  this.route('bar');
}

Router.map(function() {
  this.router('index', { path: '/' });
  this.route('c0', registerCRoutes);
  this.route('c1', registerCRoutes);
  this.route('c2', registerCRoutes);
});

But I’m having a hard time following what you’re after… so I took a wild guess.

3

in this case, say you have your template file for c0/foo in templates/c0/foo.hbs.

Now when you go to c1/foo, ember will look for a template in templates/c1/foo.hbs and give you an error (if one doesnt exist).

Same for router files.

So now you are left with no choice but to copy/paste all your router files and template files for each of c0, c1, c2, essentially copy/pasting the code in 3 places instead of having it all in 1 place

4

c0 or rather my-c0 (component names should be double-barreled) should be a reusable component i.e. stored under the app\components\my-c0 or app\<pods>\components\my-c0 folder.

Then it can simply be used on the template associated with a given route as {{my-c0}}.

my-c0 could be composed of multiple components (my-c1, my-c2), which could in turn be composed of other components, and so forth.