Why others routers than default also applies routerLinkActive css class to them? Angular-CodePudding

I want to do router module with default route "/" as below:

const routes: Routes = [
    { path: '', component: HomeComponent},
    { path: 'messages', component: MessagesComponent },
    { path: 'profile', component: ProfileComponent },
]

And I am trying apply css class to elements as below:

    <a routerLink="/" routerLinkActive="activeLink">
        <span>Home</span>
    </a>

    <a  routerLink="/messages" routerLinkActive="activeLink">
        <span>Messages</span>
    </a>

    <a  routerLink="/profile" routerLinkActive="activeLink">
        <span>Profile</span>
    </a>

But when I try use routerLinkActive also other pages for example "/messages" and "/profile" take css class to and asign them. Why it take place here? What can I do to make this code correct?

CodePudding user response：

Most likely you need to add [routerLinkActiveOptions]="{exact: true}"

Ref: https://angular.io/api/router/RouterLinkActive