CODEWITHSUNDEEP
ionic-frameworkionic4ionic5
pratik jaiswal
pratik jaiswal

Reputation: 2065

ionic 5 tabs redirect a tab to specific page

I have 5 tabs in my app. From which I want to redirect the 5th tab to a page in the app automatically. i.e. when the user clicks on tab5 he should be redirected to page called carts

I have added carts page in children's path of the 5th tab and tried to redirect. But nothing is happening. 5th tab is not redirecting to carts page

here is the code

app.routing.module

{
    path: '',
    loadChildren: () => import('./pages/tabbar/tabbar.module').then( m => m.TabbarPageModule)
  },

tabbar.routing.module

{
    path: 'tabs',
    component: TabbarPage,
    children : [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then( m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then( m => m.Tab2PageModule)
      },

      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then( m => m.Tab3PageModule)
      },

      {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then( m => m.Tab4PageModule)
      },

      {
        path: 'tab5',
        loadChildren: () => import('../tab5/tab5.module').then( m => m.Tab5PageModule),
      },

      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }

tab5.routing.module

{
    path: '',
    component : Tab5Page,
    children : [

      {
        path : 'carts',
        loadChildren : () => import('../carts/carts.module').then(m => m.CartsPageModule)
      },

      {
        path : '',
        redirectTo : '/tab5/carts',
        pathMatch : 'full'
      }
    ]
  },

  {
    path : '',
    redirectTo : '/tab5/carts',
    pathMatch : 'full'
  }

Upvotes: 0

Views: 1215

Answers (1)

Michael Xu
Michael Xu

Reputation: 424

Can you just remove the Tabs5Page and load the CartsPage directly in tab 5's routing?

{
    path: 'tabs',
    component: TabbarPage,
    children : [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then( m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then( m => m.Tab2PageModule)
      },

      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then( m => m.Tab3PageModule)
      },

      {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then( m => m.Tab4PageModule)
      },

      {
        path: 'tab5',
        loadChildren : () => import('../carts/carts.module').then(m => m.CartsPageModule)
      },

      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }

Upvotes: 1

Related Questions