Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Nested routes in tabs not working

See original GitHub issue

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

https://ionicframework.com/docs/react/navigation#nested-routes

The example in the link works fine. But it doesn’t work when used in tabs. Note: Tab Button does not work when clicked. It works if you go directly to the link. (/settings)

Expected behavior:

Example: Creating different routes within the Settings tab. (Settings > Notifications)

Steps to reproduce:

Related code:

<IonReactRouter>
  <IonTabs>
    <IonRouterOutlet>     
      <Route path="/settings" render={props => <SettingsPage {...props} />} />
    </IonRouterOutlet>

    <IonTabBar slot="bottom">
      <IonTabButton tab="tab1" href="/settings">
        <IonIcon icon={triangle} />
        <IonLabel>Settings</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>
</IonReactRouter>

const SettingsPage: React.FC<RouteComponentProps> = ({match}) => {
  return (
    <IonRouterOutlet>
      <Route path={`${match.url}/notifications`} component={NotificationsPage} />
    </IonRouterOutlet>
  );
};

Other information:

Ionic info:

Ionic:
   Ionic CLI : 6.15.0

Utility:
   cordova-res : not installed
   native-run  : not installed

System:
   NodeJS : v14.15.2
   npm    : 6.14.9
   OS     : Windows 10

Issue Analytics

State:
Created 2 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

liamdebeasicommented, Jun 7, 2021

Glad both issues are resolved!

1reaction

yetkinaykancommented, Jun 4, 2021

https://github.com/ionic-team/ionic-framework/issues/23408

this problem is also solved. Nested routes are automatically removed from the dom.

Top Results From Across the Web

[Bug]: Nested routes not working fine #9376 - GitHub

I was trying to solve for using the nested routes and handlers to build breadCrumbs, and the nesting could go deeper. I had...

Ionic nested routes and tabs not working as expected

Hi, We have an application with 4 tabs each having nested routes. Ex. of routes tab1/childPage1/childPage2 tab2/childPage1/ from tab1 we ...

unable to create triple nested routes in react router with ...

I'm trying to create triple nesting with react-router but it's not working. Here is the expected output enter image description here ...

Migrating to React Router v6: A complete guide

The v5 library has some issues with the routing algorithm and ... For developing nested routes, developers had to use write more code...

auto_route | Flutter Package - Pub.dev

Declarative Navigation; Working with Paths; Route guards; Wrapping routes ... a nested route every-time the tab changes and that might work but our...