ion-split-pane on desktop, ion-tabs on mobile

Question

I want to display an ion-split-pane when the app is displayed on a desktop (or large screen)

And switch to an ion-tabswhen the app is displayed on a mobile.

Is this possible to do that ? I'm using Ionic on React

Answer 1

Here a non-perfect solution, because thes routes are duplicated.

I don't know how to fix this unfortunatly.

const Routes = () => <IonRouterOutlet id="main">
  <Route path="/tabs" component={Tabs} exact={true} />
  <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>

const SplitPane = () => <IonSplitPane contentId="main">
  <Menu />
  <Routes />
</IonSplitPane>

const Tabs = () => <IonTabs>
  <IonRouterOutlet id="main">
    <Route path="/tabs" component={Tabs} exact={true} />
    <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>
  </IonTabBar>
</IonTabs>

const App: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
        {isPlatform("mobileweb") && <Tabs />}
        {isPlatform("desktop") && <SplitPane />}
      </IonReactRouter>
    </IonApp>
  );
}

export default App;

Answer 2

Given @ionic/react restrictions this is what I came up with:

// Define routes as an array of components and add key prop
const routeComponents = [
  <Redirect exact from="/" to={routes.dashboard} />,
  <Route path={routes.dashboard} exact component={DashboardPage} />,
  <Route path={routes.first} exact component={FirstPage} />,
  <Route path={routes.second} exact component={SecondPage} />,
  <Route component={NotFoundPage} />,
].map((Route, index) => ({ ...Route, key: index }))


const App: React.FC = () => {
  const showSplitPane = useBreakpoint('lg')

  return (
    <IonApp>
      <IonReactRouter>
        {showSplitPane
          ?
            <IonSplitPane contentId="main">
              <Menu items={menuItems} />
              <IonRouterOutlet id="main">
                {routeComponents}
              </IonRouterOutlet>
            </IonSplitPane>
          :
            <TabsWrapper items={menuItems}>
              <IonRouterOutlet id="main">
                {routeComponents}
              </IonRouterOutlet>
            </TabsWrapper>
        }
      </IonReactRouter>
    </IonApp>
  )
}

I wish there was an easier way