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

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