Divide an Ionic React page into multiple tabs

I have a list on my home page and when an item is clicked, I want to get the details of that item and show it in a tabbed format (3 different tabs to be specific).
Here’s how I set it up with Ionic 4 and React:

Home.jsx

const App = () => (
  <IonApp>
      <IonReactRouter>
        <Menu/>
        <IonRouterOutlet id="main">
          <Route exact path="/list" component={ListPage} />
          <Route path="/list/:vid" component={DetailsPage}/>
          <Route exact path="/" render={() => <Redirect to="/list" />} />
        </IonRouterOutlet>
      </IonReactRouter>
  </IonApp>
);

In DetailsPage, I plan to fetch the data based on ID and then pass it to child component for different tab.

const DetailsPage = ({match}) => {
	
    // Fetch Data and pass it as props later
	
    return (
      <IonPage>
        <IonReactRouter>
          <IonTabs>

            <IonRouterOutlet>
              <Route exact path={`${match.url}/:tab(tab1)`} component={TabOne data=data.tab1}  />
              <Route exact path={`${match.url}/:tab(tab2)`} component={TabTwo data=data.tab2} />
              <Route exact path={`${match.url}/:tab(tab3)`} component={TabThree data=data.tab3} />
            </IonRouterOutlet>

            <IonTabBar slot="bottom">
              <IonTabButton tab="tab1" href={`${match.url}/tab1`}>
                <IonIcon icon={icon} />
                <IonLabel>Tab 1</IonLabel>
              </IonTabButton>
              <IonTabButton tab="tab2" href={`${match.url}/tab2`}>
                <IonIcon icon={icon} />
                <IonLabel>Tab 2</IonLabel>
              </IonTabButton>
              <IonTabButton tab="tab3" href={`${match.url}/tab3`}>
                <IonIcon icon={icon} />
                <IonLabel>Tab 3</IonLabel>
              </IonTabButton>
            </IonTabBar>

          </IonTabs>
        </IonReactRouter>
      </IonPage>
    );
};

I wanted to check if it’s the right way to do it. Although with this approach, I am having a problem: in the components for tabs (TabOne.jsx, TabTwo.jsx, TabThree.jsx), I have a <IonBackButton> component but it seems to not be displayed for the first tab. Additionally, every time I change tab, it pushes the state in history and then the back button (for the other two tabs) seems to go back to the previous tab in history.

I want it to be such that that pressing the tab button will go back to the list page (essentially, the details page should be treated as one page along with the tabs combined.)

try this - https://github.com/aaronksaunders/ionic-react-detail-tab

2 Likes