Ember: Reuse nested route in different parents - ember.js

Question

I wanted to know how to reuse a nested route in different parent route.
For example:
Template routeA:
{{outlet}} -> routeX
Template routeB:
{{outlet}} -> routeX
Router.map(function() {
this.route('routeA', function(){
this.route('routeX', {resetNamespace:true});
});
this.route('routeB', function(){
this.route('routeX', {resetNamespace:true});
});
})
I need to use {{link-to 'routeX'}} to show routeX inside the current parent.
In the example always shows the routeB when I use {{link-to 'routeX'}}
I have 2 aproax to solution:
1) Put 1 child route in routeA and other in routeB:
Router.map(function() {
this.route('routeA', function(){
this.route('routeX');
});
this.route('routeB', function(){
this.route('routeX');
});
})
and use {{link-to 'routeA.routeX'}} and {{link-to 'routeB.routeX'}}
but in this aproax I have a duplicate code.
2)
router.map(function() {
this.route('*wildcard', function(){
this.route('routeX', {resetNamespace:true});
});
})
this option works but in the url appear "undefined" http://...undefined/routeX
Any idea?
Thanks

Answer 1

If possible, I recommend using either a component or mixin to share whatever code or functionality you need between those two similar routes.
That would look something like this
export default Ember.Mixin.create({
model() {
return Ember.Object.create({title: 'Awesome'})
}
});
and then use it in your route like so,
import ReUseMixin from '../../mixins/re-use'
export default Ember.Route.extend(ReUseMixin,{
or by defining your component, as lets say re-use.hbs and re-use.js
you can just use that in routeA/routeX and routeB/routeX as
{{re-use}}
Here is a link to an ember twiddle, that demonstrates what I would recommend, hopefully that can provide you with a solution.