Back arrow key gone when navigating to page

Ionic Framework
1

I have total 3 pages, they are in sequence of 1.visit Page 2. Claim Page 3.Visit-Details Page or activity-details Page.

On Claim Page, we have one component visit-item-selector which navigates to visit-details page or activity details Page based on item we click.

I have no issues so far when navigates forward and backward.

On claim Page we have checkboxes,if we have checked checkbox and press Back button we get Alert–>Do you want to cancel without save?, In that If I say No, will stay on same page(Claim Page),

Issue : Now if we click on item(On claim page) to navigate to visit-details page, Back arrow on left corner gone.

I put ngOnInit() and ngOnDestory() on every page and component(visit-item-selector), It seems when the issue occurs, i.e land on visit-details-page, ngOnDestroy() of component and previous pages (1. visitpage and claim Page) is called, resulting visit-details page being the only page on stack.

Used .

I am using below way to navigate.

this.router.navigate(['pageName']);


<ion-back-button></ion-back-button>

Refere below image for above description and flow of navigation
enter image description here
Please help. Let me know if you need more information.

Thank you.

2

I have tried to use this.navController.navigateForward('visit-details') and it is working as expected. Not sure what is the issue with router.navigate, why it is clearing stack in the particular scenario.