Page routing not happening Ion Tab

Hi Team,

I got Iontabs with React, Page routing happening only first time if I click the tabs. Issue is nothing happens after the 2nd click on each tab, but the url shows the correct page names.

TabRoot.tsx

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar,IonTabs,IonRouterOutlet,IonTabBar,IonTabButton,IonIcon,
  IonLabel } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import { Redirect, Route } from 'react-router-dom';
import { list, settings,calendarOutline,homeOutline,chatboxEllipsesOutline} from 'ionicons/icons';
import SchedulePage from './SchedulePage';
import SettingsPage from './SettingsPage';
import MessagePage from './MessagePage';
import WelcomePage from './WelcomePage';

const TabRoot: React.FC = () => {
  return (
    <IonTabs>
      <IonRouterOutlet>
        <Route path="/home/schedule" component={SchedulePage} exact={true} />
        <Route path="/home/settings" component={SettingsPage} exact={true} />
        <Route path="/home/message" component={MessagePage} exact={true} />
        <Route path="/home/welcome" component={WelcomePage} exact={true} />
        <Route path="/home" render={() => <Redirect to="/home/welcome" />} exact={true} />
        <Route path="/" render={() => <Redirect to="/home/welcome" />} exact={true} />
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        <IonTabButton tab="welcome" href="/home/welcome">
          <IonIcon icon={homeOutline} />
          <IonLabel>Home</IonLabel>
        </IonTabButton>
        <IonTabButton tab="message" href="/home/message">
          <IonIcon icon={chatboxEllipsesOutline} />
          <IonLabel>Message</IonLabel>
        </IonTabButton>
        <IonTabButton tab="schedule" href="/home/schedule">
          <IonIcon icon={calendarOutline} />
          <IonLabel>Schedule</IonLabel>
        </IonTabButton>
        <IonTabButton tab="settings" href="/home/settings">
          <IonIcon icon={settings} />
          <IonLabel>Settings</IonLabel>
        </IonTabButton>
      </IonTabBar>
  </IonTabs>
  );
};

export default TabRoot;

Here is the app.tsx

import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import TabRoot from './pages/TabRoot';

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

export default App;

1 post - 1 participant

Read full topic