Unable to navigate from page1 to page2, ionic v5

Question

I am trying to migrate my application from ionic v3 to v5 and facing below navigation issue. Thanks for help in advance.

While navigating from NavComponent to WhyJoinPage, WhyJoinPage’s constructor(), ngOnInit() methods are executing, also APIs are fetching the data and injecting it to the instance variables.

But instead of showing WhyJoinPage, only displaying NavComponent. So navigation is not happening.

I have tried angular routing,

this.router.navigate(['/whyjoinpage'], {state: {item: moreOptions }});

And also tried NavController’s navigateForward methods.

let navigationExtras: NavigationExtras = {
      queryParams: {item: JSON.stringify(moreOptions) }
  };
this.navCtrl.navigateForward(['/whyjoinpage'],  navigationExtras);

But neither options are is showing WhyJoinPage.

The constructor of WhyJoingPage is executed and able to see the data from NavComponent

if (this.router.getCurrentNavigation().extras.state) {
          const state = this.router.getCurrentNavigation().extras.state;
          this.whyJoinOption = state.item;
        }

In console I does not see any errors, and ionic build also does not give any errors.

My custom module routing file is like below

const routes: Routes = [
  {
    path: 'whyjoinpage',
    component: WhyJoinPage,
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})

export class CustomAppProviderRoutingModule {}

My App module file is like below.

const routes: Routes = [
    {
    path:'dashboard',
    component :DashboardPage
  },
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { enableTracing: true,  preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

1. You need to have routing module with specific paths
2. Create link on first page with routerLink to other page
3. If you want to pass some data from first page to other then use navigationExtras parameter with router link
4. You need to have activatedRoute to subscribe the state of the navigation to fetch the data passed from the previous page on the current page

please follow for more: https://ionicframework.com/blog/navigating-the-change-with-ionic-4-and-angular-router/