ionic react nested route

on tab3, click link1

route to /tab3/details/:id

press back button

click link3, detail 3 page opens

app.tsx

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs, IonSplitPane
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { ellipse, square, triangle } from 'ionicons/icons';
import Tab1 from './pages/Tab1';
import Tab2 from './pages/Tab2';
import Tab3 from './pages/Tab3';
import Detail from './pages/Detail';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path="/tab1" component={Tab1} exact={true} />
          <Route path="/tab2" component={Tab2} exact={true} />
          <Route path="/tab3" component={Tab3} exact={true} />
          <Route path='/tab3/details/:id' component={Detail} />
          <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            <IonIcon icon={ellipse} />
            <IonLabel>Tab 2</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon icon={square} />
            <IonLabel>Tab 3</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

---------------------------

tab3.tsx

import React, { useState } from 'react';

import {

  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,

  IonAlert, IonButton, IonCard, IonCardHeader,

  IonCardSubtitle, IonCardTitle, IonCardContent,

  IonItem, IonIcon, IonLabel, IonBadge, IonList,

  IonItemDivider, IonCheckbox, IonFab, IonFabButton,

  IonFabList, IonItemGroup, IonItemSliding,

  IonItemOptions, IonItemOption, IonNote, IonMenu,

  IonRouterOutlet, IonListHeader, IonMenuToggle,

  IonButtons, IonMenuButton, IonInput, IonSplitPane,

  IonPopover, IonSpinner, IonRadioGroup, IonRadio,

  IonRange, IonSearchbar, IonFooter, IonSegmentButton,

  IonSegment, IonToast, IonToggle

} from '@ionic/react';

import ExploreContainer from '../components/ExploreContainer';

import './Tab3.css';

import {

  call, home, heart, pin, star,

  globe, basket, camera, bookmark

} from 'ionicons/icons';

import { IonReactRouter } from '@ionic/react-router';

const Tab3: React.FC = () => {

  return (

    <IonPage>

      <IonHeader>

        <IonToolbar>

          <IonTitle>Routes Example</IonTitle>

        </IonToolbar>

      </IonHeader>

      <IonContent>

        <IonList>

          <IonItem routerLink="/tab3/details/1">

            <IonLabel>Link 1</IonLabel>

          </IonItem>

          <IonItem routerLink="/tab3/details/2">

            <IonLabel>Link 2</IonLabel>

          </IonItem>

          <IonItem routerLink="/tab3/details/3">

            <IonLabel>Link 3</IonLabel>

          </IonItem>

        </IonList>

      </IonContent>

    </IonPage>

  );

};

export default Tab3;

--------------------------------

detail.tsx

import React, { useState } from 'react';

import {

    IonContent, IonHeader, IonPage, IonTitle, IonToolbar,

    IonAlert, IonButton, IonCard, IonCardHeader,

    IonCardSubtitle, IonCardTitle, IonCardContent,

    IonItem, IonIcon, IonLabel, IonBadge, IonList,

    IonItemDivider, IonCheckbox, IonChip, IonAvatar,

    IonGrid, IonRow, IonCol, IonInput, IonToggle,

    IonModal, IonRefresher, IonRefresherContent,

    IonTextarea, IonSelect, IonListHeader,

    IonSelectOption, IonButtons, IonBackButton,

    IonMenuButton, IonSegment, IonSearchbar,

    IonSegmentButton, IonFooter, IonText, IonToast,

    useIonViewDidEnter, useIonViewDidLeave,

    useIonViewWillEnter, useIonViewWillLeave,

} from '@ionic/react';

import {

    person

} from 'ionicons/icons';

import { RefresherEventDetail } from '@ionic/core';

import axios from 'axios'

import { RouteComponentProps } from "react-router-dom";

interface Props extends RouteComponentProps<{

    id: string;

}> { }

const Detail: React.FC<Props> = ({ match }) => {

    return (

        <IonPage>

            <IonHeader>

                <IonToolbar>

                    <IonButtons slot="start">

                        <IonBackButton />

                    </IonButtons>

                    <IonTitle>Detail Page</IonTitle>

                </IonToolbar>

            </IonHeader>

            <IonContent>

                <IonList>

                    <IonItem>Detail # {match.params.id}</IonItem>

                </IonList>

            </IonContent>

        </IonPage>

    );

};

export default Detail;

reference:

https://ionicframework.com/docs/react/navigation