Back arrow key gone when navigating to page

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.



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.

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.