# Ionic 4: Navigation inside a tab

**URL:** <https://forum.ionicframework.com/t/ionic-4-navigation-inside-a-tab/142637>\
**Category:** Ionic Framework\
**Created:** [September 24, 2018, 8:55am UTC](https://forum.ionicframework.com/t/ionic-4-navigation-inside-a-tab/142637 "2018-09-24T08:55:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![JonasCoding](https://avatars.discourse-cdn.com/v4/letter/j/a8b319/32.png) [@JonasCoding](https://forum.ionicframework.com/u/JonasCoding)\
**Post date:** [September 24, 2018, 8:55am UTC](https://forum.ionicframework.com/t/ionic-4-navigation-inside-a-tab/142637/1 "2018-09-24T08:55:15Z")

</div>

Hey guys,

I’m currently struggling with navigation in Ionic 4. I’m using the tabs template. I’m just trying to navigate one route deeper inside a tab. My `tabs.routing.module` looks like this:

```
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage,

        children: [
          { path: 'item', outlet: 'info', component: ItemInfoPage}
        ]
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

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

```

As you can see I have 4 tabs. Inside the InfoPage (which is a tab) I have a nested Page called `item-info`. I thought with setting up a child route for the info tab I could navigate via `/tabs/(info:info)/item` to my nested `item-info.page`. But that I won’t work. I will just get redirected to `/tabs/(info:info)`

Also I don’t get why I have to navigate to `/tabs/(info:info)` to reach my `info` tab. I mean the path I setup was `info`. Why can’t I just use `/tabs/info`?

---

<div class="post-metadata">

**Author:** ![btribouillet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/btribouillet/32/117575_2.png) [@btribouillet](https://forum.ionicframework.com/u/btribouillet)\
**Post date:** [September 30, 2018, 12:49pm UTC](https://forum.ionicframework.com/t/ionic-4-navigation-inside-a-tab/142637/2 "2018-09-30T12:49:36Z")

</div>

Hey!

I’m actually looking for the exact same solution.  
I just posted on stackoverflow about this.

[https://stackoverflow.com/questions/52577779/ionic-4-angular-6-nested-child-routes-in-tabs](https://stackoverflow.com/questions/52577779/ionic-4-angular-6-nested-child-routes-in-tabs)

> Also I don’t get why I have to navigate to `/tabs/(info:info)` to reach my `info` tab. I mean the path I setup was `info` . Why can’t I just use `/tabs/info` ?

Someone answered about that :

[https://stackoverflow.com/questions/52010247/ionic-4-tabs-starter-what-does-href-tabs-contactcontact-do](https://stackoverflow.com/questions/52010247/ionic-4-tabs-starter-what-does-href-tabs-contactcontact-do)

---

<div class="post-metadata">

**Author:** ![btribouillet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/btribouillet/32/117575_2.png) [@btribouillet](https://forum.ionicframework.com/u/btribouillet)\
**Post date:** [September 30, 2018, 2:46pm UTC](https://forum.ionicframework.com/t/ionic-4-navigation-inside-a-tab/142637/3 "2018-09-30T14:46:12Z")

</div>

I came up with a solution. I guess this is the way to do it.

But i’ll be happy to know if there is a different approach :).

> <https://stackoverflow.com/questions/52577779/ionic-4-angular-6-nested-child-routes-in-tabs/52578941#52578941>

---

<div class="post-metadata">

**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\
**Post date:** [September 30, 2018, 4:25pm UTC](https://forum.ionicframework.com/t/ionic-4-navigation-inside-a-tab/142637/4 "2018-09-30T16:25:38Z")

</div>

> **[aaronksaunders/ionicv4-tabs-with-detail](https://github.com/aaronksaunders/ionicv4-tabs-with-detail)**
>
> Contribute to aaronksaunders/ionicv4-tabs-with-detail development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![JonasCoding](https://avatars.discourse-cdn.com/v4/letter/j/a8b319/32.png) [@JonasCoding](https://forum.ionicframework.com/u/JonasCoding)\
**Post date:** [October 8, 2018, 1:54pm UTC](https://forum.ionicframework.com/t/ionic-4-navigation-inside-a-tab/142637/5 "2018-10-08T13:54:34Z")

</div>

Thank you guys! So you create another page and create a route inside the tabs.router.module with the outlet set to the same outlet as the “parent”. That works but it’s not really a child.

Another problem this way is, when you route to the child page (in your case the details page), then switch to another tab and then click back on the home tab, you go to the home tab. I would prefer to, when clicking again on the home tab to still be in the details page. is this somehow possible?

---

<div class="post-metadata">

**Author:** ![servrox](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/servrox/32/124281_2.png) [@servrox](https://forum.ionicframework.com/u/servrox)\
**Post date:** [February 17, 2019, 4:34pm UTC](https://forum.ionicframework.com/t/ionic-4-navigation-inside-a-tab/142637/6 "2019-02-17T16:34:42Z")

</div>

**Demo** (with two different approaches) + **Explanation** :

> **[servrox/demo-ionic-tab-routing](https://github.com/servrox/demo-ionic-tab-routing)**
>
> An Ionic project which shows different kinds of route definition for a tab based layout. - servrox/demo-ionic-tab-routing

With [4.0.0-beta.18](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#400-beta18-2018-12-13) ion-tab was removed and it’s not necessary to use named outlets.

Ionic CLI version **4.10.3**  
Ionic Framework @ionic/angular **4.0.1**

---

<div class="post-metadata">

**Author:** ![ricardofvallejo6969](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ricardofvallejo6969/32/131735_2.png) [@ricardofvallejo6969](https://forum.ionicframework.com/u/ricardofvallejo6969)\
**Post date:** [April 10, 2019, 6:16pm UTC](https://forum.ionicframework.com/t/ionic-4-navigation-inside-a-tab/142637/7 "2019-04-10T18:16:33Z")

</div>

@servrox example complies with latest ionic tabs starter.

Thanks for sharing!

---

<div class="post-metadata">

**Author:** ![sampath](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sampath/32/137165_2.png) [@sampath](https://forum.ionicframework.com/u/sampath)\
**Post date:** [November 12, 2020, 12:07pm UTC](https://forum.ionicframework.com/t/ionic-4-navigation-inside-a-tab/142637/8 "2020-11-12T12:07:36Z")

</div>

@JonasCoding Have you done this?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:52pm UTC](https://forum.ionicframework.com/t/ionic-4-navigation-inside-a-tab/142637/9 "2021-07-19T20:52:32Z")

</div>

Closed on July 19, 2021, 8:52pm UTC