React + Ionic 5: Tab navigation problems

user_2429966 0
Viewed 5306

I'm having trouble to get tabs navigation working properly.

This is my code so far:

App.tsx:

const App: React.FC = () =>
  <IonApp>
      <IonReactRouter>
          <IonRouterOutlet id="main">
              <Route exact path="/" render={() => <Redirect to="/home"/>}/>
              <Route path="/home" render={(props) => <Home {...props}/>} exact={true}/>
          </IonRouterOutlet>
      </IonReactRouter>
  </IonApp>
)

Home.tsx:

const Home: React.FC<RouteComponentProps> = (props: RouteComponentProps) => (
    <IonPage>
        <IonTabs>
            <IonRouterOutlet id='tabs'>
                <Route path='/:tab(myDecks)' render={(props) => <MyDecks {...props} />} exact/>
                <Route path='/:tab(explore)' render={(props) => <Explore {...props} />} exact/>
                <Redirect from='/home' to='/myDecks'/>
            </IonRouterOutlet>
            <IonTabBar slot='bottom'>
                <IonTabButton tab='myDecks' href='/myDecks'>
                    <IonLabel>My Decks</IonLabel>
                </IonTabButton>
                <IonTabButton tab='explore' href='/explore'>
                    <IonLabel>Explore</IonLabel>
                </IonTabButton>
            </IonTabBar>
        </IonTabs>
    </IonPage>
);

MyDecks.tsx:

const MyDecks: React.FunctionComponent<RouteComponentProps> = (props: RouteComponentProps) => {
    return <>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>My Decks</IonTitle>
                </IonToolbar>
            </IonHeader>

            <IonContent className='ion-padding'>
                My Decks
            </IonContent>
    </>
};

The current behavior is:

  1. User access /
  2. User is redirected to /home
  3. Another redirect to /myDeck, "My Deck" tab selected and URL is good.
  4. If the user clicks on the "Explore" tab, URL changes, "My Deck" tab is deselected and the "Explore" tab is selected, however, the page content doesn't change.

If I alter the order of the routes inside <IonRouterOutlet>, then the "My Decks" tab is originally selected, and when the user first clicks the "Explore" tab, it renders ok, but never get back to "My Decks" tab.

I also noticed that when refreshing at /myDeck or /explore no content renders at all.

ionic5 ionic-framework reactjs javascript
3 Answers

According to the React Tabs starter template you have to nest the IonRouterOutlet inside of IonTabs, which is nested in IonReactRouter.

Here's how their App.tsx looks like:

  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path="/tab1" component={Tab1} exact={true} />
          <Route path="/tab2" component={Tab2} exact={true} />
          <Route path="/tab3" component={Tab3} />
          <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>

For me it worked that way. Anyway Ionic+React documentation is not very detailed regarding things like that. One still has to search very much.

user_12556740

The solution was to wrap the tabs content with <IonPage>.

const MyDecks: React.FunctionComponent<RouteComponentProps> = (props: RouteComponentProps) => {
    return <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>My Decks</IonTitle>
                </IonToolbar>
            </IonHeader>

            <IonContent className='ion-padding'>
                My Decks
            </IonContent>
    </IonPage>
};
user_24299660 
 <IonApp>
  <IonPage>
    <IonReactRouter>
      <Menu />
      <IonTabs>
        <IonRouterOutlet id="main">
          <Route path="/Login" exact={true}>
            <Login />
          </Route>
          <Route path="/" exact={true}>
            <Redirect to="/Login"></Redirect>
          </Route>
          <Route path="/settings" exact={true}>
            <UserSettings />
          </Route>
          <Route path="/page/:name" exact={true}>
            <Page />
          </Route>
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          <IonTabButton tab="home" href="/page/Inbox">
            <IonLabel>Home</IonLabel>
          </IonTabButton>
          <IonTabButton tab="settings" href="/settings">
            <IonLabel>Settings</IonLabel>
          </IonTabButton>
        </IonTabBar>
        
      </IonTabs>
    </IonReactRouter>
  </IonPage>
</IonApp>
user_180046290
Related