How to add active class only for exact routes and not parent routes in ember js?

I have two routes which are nested like this.

router.js

this.route('profile', function() {
  this.route('edit');
});

and couple of navbar links for these routes like this..

navbar.hbs

{{#link-to 'profile' tagName="li"}}<a href>View Profile</a>{{/link-to}}
{{#link-to 'profile.edit' tagName="li"}}<a href>Edit Profile</a>{{/link-to}}

The link-to helper adds active class to the li tag here. So when I am in profile route, the first link has active class and when I am in profile.edit route, both the links have active class. (apparently because both the routes get activated when profile.edit is visited.)

How can I avoid the parent route link to get the active class when in a child route?

Basically I don't want the first link (to profile) to have active class when in profile.edit route.