Angular routerLinkActive not working when navigating using skipLocationChange

Question

Suppose I have following routes:

const routes: Routes[] = [
  {
    path: 'a',
    component: AComponent
  },
  {
    path: 'b',
    component: BComponent
  }
]

And I have some Navbar link with routerLinkActive class when on path a like this:

<li
  [routerLinkActiveOptions]="{exact: true}"
  routerLinkActive="is-active"
  class="BottomBar-menuItem"
>
  <a routerLink="../a">A</a>
</li>

The problem occurs when I'm navigating from path a to path b with skipLocationChange

//component A

navigate() {
 this.router.navigate(['../b'], { skipLocationChange: true, relativeTo: this.activatedRoute })
}

The browser url doesn't changes, it still on /a, the view is changed to component B, but routerLinkActive doesn't apply the is-active class.

routerLinkActive should still apply the is-active class because the url doesn't change, right? What am I missing here?

Answer 1

it's happened because you use "skipLocationChange: true " and skip the location change in the URL you can see an example in:

https://stackblitz.com/edit/angular-skiplocationchange

and angular documentation: https://angular.io/api/router/NavigationExtras