React + Ioni c 5: проблемы навигации по вкладкам

Question

У меня проблемы с настройкой навигации по вкладкам.

Это мой код:

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>
    </>
};

Текущее поведение:

1. Доступ пользователя /
2. Пользователь перенаправлен на / home
3. Еще одно перенаправление на / myDeck, выбрана вкладка «Моя колода» и правильный URL-адрес.
4. Если пользователь нажимает на вкладку «Обзор», URL-адрес изменяется, вкладка «Моя колода» Отмена выбора и вкладка «Исследовать», однако, содержимое страницы не меняется.

Если я изменю порядок маршрутов внутри <IonRouterOutlet>, то вкладка «Мои колоды» изначально выбран, и когда пользователь впервые нажимает на вкладку «Исследовать», он отображается нормально, но никогда не возвращается на вкладку «Мои колоды».

Я также заметил, что при обновлении в / myDeck или / explore нет контент отображается вообще.

Answer 1

Согласно стартовому шаблону React Tabs вы должны вложить IonRouterOutlet в IonTabs, который вложен в IonReactRouter.

Вот как их App.tsx выглядит так:

  <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>

Для меня это сработало так. В любом случае документация по Ionic + React не очень детальна в отношении подобных вещей. Нужно еще очень много искать.

Answer 2

Решением было обернуть содержимое вкладок с помощью <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>
};