ion-split-pane на рабочем столе, ion-tabs на мобильном телефоне

Question

Я хочу отобразить ion-split-pane, когда приложение отображается на рабочем столе (или большой экран)

И переключить на ion-tabs, когда приложение отображается на мобильном телефоне .

Возможно ли это сделать? Я использую Иони c на React

Answer 1

Здесь не идеальное решение, потому что эти маршруты дублируются.

Я не знаю, как это исправить, к сожалению.

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;