Nested navigation inside my Tabs

Hi there!

I’ve set up a tabs navigation here and it’s almost working fine. The issue happens when I try to click on a IonItem to navigate to an internal page, change I’m supposed to change my password.

Untitled_ Feb 10, 2021 11_56 PM

Main.router.tsx

import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import { listOutline, settingsOutline } from "ionicons/icons";
import React from "react";
import { Redirect, Route, RouteComponentProps } from "react-router";

import { FeedScreen } from "./Feed/Feed.screen";
import { ChangePasswordScreen } from "./Settings/ChangePassword.screen";
import { SettingsScreen } from "./Settings/Settings.screen";

export const MainPageRouter: React.FC<RouteComponentProps> = ({ match }) => {
  return (
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet id="main">
          <Route
            path="/main/settings/change-password"
            component={ChangePasswordScreen}
            exact
          />
          <Route
            path={`${match.url}/feed`}
            component={FeedScreen}
            exact={true}
          />
          <Route
            path={`${match.url}/settings`}
            component={SettingsScreen}
            exact={true}
          />
          <Redirect from="/main" to="/main/feed" exact />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="feed" href={`${match.url}/feed`}>
            <IonIcon icon={listOutline} />
            <IonLabel>Feed</IonLabel>
          </IonTabButton>
          <IonTabButton tab="settings" href={`${match.url}/settings`}>
            <IonIcon icon={settingsOutline} />
            <IonLabel>Settings</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  );
};

Settings.screen.tsx

import { IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from "@ionic/react";
import React from "react";
import { useDispatch } from "react-redux";

import { RoutingHelper } from "../../../libs/RoutingHelper";
import { userClear } from "../../../store/actions/user.action";

export const SettingsScreen: React.FC = () => {
  const dispatch = useDispatch();
  const onUserLogout = () => {
    dispatch(userClear());

    RoutingHelper.redirect("/auth");
  };

  return (
    <>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Settings</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonList>
        <IonItem
          routerLink="/main/settings/change-password"
          routerDirection="root"
          detail
        >
          <IonLabel>Change Password</IonLabel>
        </IonItem>
        <IonItem detail onClick={onUserLogout}>
          <IonLabel>Logout</IonLabel>
        </IonItem>
      </IonList>
    </>
  );
};

ChangePassword.screen.tsx

<InternalPage title={TS.translate("auth", "changePassword")}>
      <Text>{TS.translate("auth", "changePasswordInfoText")}</Text>
      <FloatingInput
        label={TS.translate("form", "currentPassword")}
        type="password"
        value={passwords.currentPassword}
        onChange={(e) =>
          setPasswords({ ...passwords, currentPassword: e.target.value })
        }
      />
      <br />
      <FloatingInput
        label={TS.translate("form", "newPassword")}
        type="password"
        value={passwords.newPassword}
        onChange={(e) =>
          setPasswords({ ...passwords, newPassword: e.target.value })
        }
      />
      <br />
      <IonButton expand="block" color="tertiary" onClick={onSubmit}>
        {TS.translate("form", "submit")}
      </IonButton>
    </InternalPage>

PS: InternalPage is a custom IonPage.

Another issue is that these tabs don’t disappear when I’m entering an internal screen

Could someone give me a hand?