Search code examples
angularangular2-routing

Angular 2 routerLinkActive always active for base path

I have this code for my navbar: 

<nav>
  <a [routerLink]="['/']" [routerLinkActive]="['nav-active']">HOME</a>
  <a [routerLink]="['/about']" [routerLinkActive]="['nav-active']">ABOUT</a>
  <a [routerLink]="['/records']" [routerLinkActive]="['nav-active']">RECORDS</a>
</nav>

The problem is the HOME nav point always gets the class because / seems to be always active. Is this avoidable with a small and simple solution?

Thanks for the help

Edit:

this is the solution for now:

[routerLinkActiveOptions]="{ exact: true }"

Solution

  • This appears to be a known issue. A few workarounds are detailed in this thread: https://github.com/angular/angular/issues/8397

    From Github Thread:

    "you need to add an additional option to your routerLink."

    [routerLinkActiveOptions]="{ exact: true }"

    Then your home route will only be active if you're on the exact route. The home route with an empty path will be a partial match on all routes