CODEWITHSUNDEEP
ionic-frameworkionic-reactionic-tabs
Ashish Tripathi
Ashish Tripathi

Reputation: 666

Ionic + React. Side Menu and Tabs together only default tab is working rest two tabs are coming as blank

I'm using Ionic with React.

In my app, I've both side menu and the tabs together.

In the tabs only the default tab is working properly other tabs are showing a blank screen.

The issue looks like this

My code is as follows:

1. App.tsx looks as follows

const App: React.FC = () => (
<IonApp>
    <IonReactRouter>
        <IonSplitPane contentId="main">
        <Menu />
  
        <IonRouterOutlet id="main">                
            <Route path="/login" component={Login} exact />
            <Route path="/tabs" component={Tabs} exact />
            <Route path="/register" component={Register} exact />
        <Route exact path="/" render={() => <Redirect to="/login" />} />
    </IonRouterOutlet>
    </IonSplitPane>
</IonReactRouter>
</IonApp>
);

export default App;

In this, the below Route opens a tabbed page

<Route path="/tabs" component={Tabs} exact />

2. Tabs.tsx looks as follows

function Tabs() {
    return (
    <IonTabs>
    <IonRouterOutlet>
            <Route path="/tabs/tab1" component={Tab1} exact={true} />
            <Route path="/tabs/tab2" component={Tab2} exact={true} />
            <Route path="/tabs/tab3" component={Tab3}  exact={true}/>
            <Route path="/tabs" render={() => <Redirect to="/tabs/tab1" />} exact={true} />
    </IonRouterOutlet>

    <IonTabBar slot="bottom">

    <IonTabButton tab="calendar" href="/tabs/tab1">
          <IonIcon icon={calendar} />
          <IonLabel>Tab1</IonLabel>
    </IonTabButton>

    <IonTabButton tab="analysis" href="/tabs/tab2">
          <IonIcon icon={barChart} />
          <IonLabel>Tab2</IonLabel>
    </IonTabButton>

    <IonTabButton tab="timer" href="/tabs/tab3">
          <IonIcon icon={timer} />
          <IonLabel>Tab3</IonLabel>
    </IonTabButton>
        
      </IonTabBar>
    </IonTabs>

    
    );
    };

    export default Tabs;

3. Tab1.tsx looks like this

const Tab1 = () => {
return (
    <IonPage>
    <IonHeader>
            <IonToolbar  color="secondary">
                    <IonButtons slot="start">
                    <IonMenuButton />
                    </IonButtons>
                    <IonTitle>Timesheet</IonTitle>
                    </IonToolbar>
    </IonHeader>
       
    <IonHeader collapse="condense">
            <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
            </IonToolbar>
    </IonHeader>
    <IonContent  class="ion-padding">
        Tab 1 Content
    </IonContent>
    </IonPage>
    );
};

export default Tab1;

Other Tabs Tab2.tsx and Tab3.tsx look exactly the same.

Upvotes: 0

Views: 1230

Answers (1)

Ashish Tripathi
Ashish Tripathi

Reputation: 666

I figured out the issue.

It was an issue with the Route into my App.tsx file.

I changed my Route as below. (removed exact)

<Route path="/tabs" component={Tabs} />

Earlier Route which was causing the error is below

<Route path="/tabs" component={Tabs} exact/>

Upvotes: 1

Related Questions