Moved nested Routes to the global IonRouterOutlet

App.tsx

import React from 'react';
import {Redirect, Route, RouteComponentProps} from 'react-router-dom';
import {
  IonApp,
  IonBackButton,
  IonButtons, IonContent,
  IonHeader, IonItem, IonLabel, IonList,
  IonPage,
  IonRouterOutlet, IonTitle,
  IonToolbar
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';

/* 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';
// import Detail from "src/pages/Detail";


const ListPage:React.FC<RouteComponentProps> = ({ match }) => {
  return (
    <IonRouterOutlet>
      <Route exact path={match.url} component={List} />
      <Route path={`${match.url}/:id`} component={Item} />
    </IonRouterOutlet>
  )
}

const List: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref={'/home'} text={"Home"} />
          </IonButtons>
          <IonTitle>List</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem detail routerLink={`/list/1`}>Item #1</IonItem>
          <IonItem detail routerLink={`/list/2`}>Item #2</IonItem>
          <IonItem detail routerLink={`/list/3`}>Item #3</IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

const Item: React.FC<RouteComponentProps<{id: string}>> = ({ match }) => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton />
          </IonButtons>
          <IonTitle>Item</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        Detail of item #{match.params.id}
      </IonContent>
    </IonPage>
  );
};

const HomePage:React.FC<RouteComponentProps> = ({ match }) => {
  return (
    <IonRouterOutlet>
      <Route exact path={match.url} component={Home} />
      <Route path={`${match.url}/welcome`} component={Welcome} />
    </IonRouterOutlet>
  )
}

const Welcome: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem routerLink="/list" target="_blank" detail>
            <IonLabel>Go to list</IonLabel>
          </IonItem>
          <IonItem routerLink="/list/1" target="_blank" detail>
            <IonLabel>Go to first item</IonLabel>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

const Home: React.FC<RouteComponentProps<{id: string}>> = ({ match }) => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem routerLink="/home/welcome" target="_blank" detail>
            <IonLabel>Go to Welcome</IonLabel>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/list" component={ListPage}/>
          <Route path="/home" component={HomePage}/>
          <Route path="/" render={() => <Redirect to="/home"/> } exact={true} />
        </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;