React + Ionic 5：標簽導航問題

Question

我無法讓標簽導航正常工作。

到目前為止，這是我的代碼：

應用程序.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>
)

主頁.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>
);

我的甲板.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. 如果用戶單擊“Explore”選項卡，URL 會發生變化，“My Deck”選項卡會被取消選擇，“Explore”選項卡會被選中，但是頁面內容不會改變。

如果我更改<IonRouterOutlet>內的路線順序，則最初選擇“我的甲板”選項卡，當用戶第一次單擊“探索”選項卡時，它呈現正常，但永遠不會回到“我的甲板”選項卡.

我還注意到，在 /myDeck 或 /explore 刷新時，根本不會呈現任何內容。

Answer 1

根據該陣營選項卡啟動模板，你必須窩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>
};

Answer 3

 <IonApp>
  <IonPage>
    <IonReactRouter>
      <Menu />
      <IonTabs>
        <IonRouterOutlet id="main">
          <Route path="/Login" exact={true}>
            <Login />
          </Route>
          <Route path="/" exact={true}>
            <Redirect to="/Login"></Redirect>
          </Route>
          <Route path="/settings" exact={true}>
            <UserSettings />
          </Route>
          <Route path="/page/:name" exact={true}>
            <Page />
          </Route>
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          <IonTabButton tab="home" href="/page/Inbox">
            <IonLabel>Home</IonLabel>
          </IonTabButton>
          <IonTabButton tab="settings" href="/settings">
            <IonLabel>Settings</IonLabel>
          </IonTabButton>
        </IonTabBar>
        
      </IonTabs>
    </IonReactRouter>
  </IonPage>
</IonApp>