Link become inactive

Hi there, I’m new in Ember… And I have a problem that on transition to some route one of my links become disable. I’ll explain. In my application route I call findAll to bring me ‘instance’ and in application.hbs I have link-to like this {{#each instances as |info|}}

{{#link-to 'store.overview' info.connection_name}}{{info.connection_name}}{{/link-to}}
{{/each}}

My router looks like this this.route(‘store’, {path: ‘connections/store/:connection_name’}, function () { this.route(‘overview’, { path: ‘overview’ }, this.route(‘dimension’, { path: ‘dimension/:dim_type’ }); }); });

The thing is, when I go to overview (e.g. this.transitionToRoute(‘store.overview’, this.get(‘model.ConnectionName’)); ), one of my links is “active”, the one that is also in URL but when I go to dimension ( this.transitionToRoute(‘store.dimension’, node.type); ) it becomes inactive

Overview URL: http://localhost:4200/connections/store/store1/overview Dimension URL: http://localhost:4200/connections/store/store1/dimension/diary

What I did wrong?

Do you mean that the link to overview goes inactive when you navigate to dimension?

This is the expected behavior. Dimension is a different route and is not a child of overview, so overview is not active when you are at the dimension route.

Yes, but I thought that if overview and dimension are children of the store, so both of them will make the link active, because the “connection_name” stays the same (store1).

But now I found the solution: when I go to dimension, I’ll pass also connection_name as queryParam. Like this this.transitionToRoute(‘store.dimension’, {queryParams: connection_name:this.get(‘model.ConnectionName’), dim_type: node.type});