I'm trying to implement routerLinkActive to my app but i'm facing the issue that it's sets class active to multiple links. Here's how i'm doing it
<ul class="nav nav-tabs">
<li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/']">Home</a></li>
<li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/about']">About</a></li>
<li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/contact']" >Contact Us</a></li>
</ul>
Here it's how it looks
Here it's how it look in dev-tools And my address bar
Try to set [routerLinkActiveOptions]="{exact: true}"
to HTML as below :
<ul class="nav nav-tabs">
<li role="presentation" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a [routerLink]="['/']">Home</a></li>
<li role="presentation" routerLinkActive="active"><a [routerLink]="['/about']">About</a></li>
<li role="presentation" routerLinkActive="active"><a [routerLink]="['/contact']" >Contact Us</a></li>
</ul>
RouterLinkActive does chunk the current route and try to match it's parts with the RouterLinks you've provided. With that in mind, route /
will be matched anywhere as it's the very parent for all the other routes (like /about
, /contact
, etc. as it consist of /
+ route-path
). To simplify, it's not a bug, it's sometimes a needed functionality in your application to match multiple routes. To prevent that, you can specify the routerLinkActiveOptions
to match exactly the route you're on. That means it's not going to match parent routes but will only try to find the routerLink provided for this exact route.