Ignore query params when back browser button is pressed

Question

I have three tabs in my dashboard components. When any tab is clicked url is appended with queryParam with tab info (say root/dashboard?tab=tab1). If users clicked on multiple tabs and then presses back button, queryParams of previous tabs are shown, rightfully so.

However, I want to router to ignore all the queryParams and navigate to the previous route (say root/profiles).

How to do this in Angular?

Answer 1

On your router link you need to set the replaceUrl property to true. This will cause any links clicked to replace the current browser history location with the current link.

<a [routerLink]="['./']" replaceUrl="true" [queryParams]="{tab: 'tab1'}">Tab1</a>
<a [routerLink]="['./']" replaceUrl="true" [queryParams]="{tab: 'tab2'}">Tab2</a>
<a [routerLink]="['./']" replaceUrl="true" [queryParams]="{tab: 'tab3'}">Tab3</a>