javascript - React + Ionic 5: Tab navigation problems - Stack Overflow

admin管理员组

文章数量:1289346

I'm having trouble to get tabs navigation working properly.

This is my code so far:

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

The current behavior is:

1. User access /
2. User is redirected to /home
3. Another redirect to /myDeck, "My Deck" tab selected and URL is good.
4. If the user clicks on the "Explore" tab, URL changes, "My Deck" tab is deselected and the "Explore" tab is selected, however, the page content doesn't change.

If I alter the order of the routes inside <IonRouterOutlet>, then the "My Decks" tab is originally selected, and when the user first clicks the "Explore" tab, it renders ok, but never get back to "My Decks" tab.

I also noticed that when refreshing at /myDeck or /explore no content renders at all.

I'm having trouble to get tabs navigation working properly.

This is my code so far:

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

The current behavior is:

1. User access /
2. User is redirected to /home
3. Another redirect to /myDeck, "My Deck" tab selected and URL is good.
4. If the user clicks on the "Explore" tab, URL changes, "My Deck" tab is deselected and the "Explore" tab is selected, however, the page content doesn't change.

If I alter the order of the routes inside <IonRouterOutlet>, then the "My Decks" tab is originally selected, and when the user first clicks the "Explore" tab, it renders ok, but never get back to "My Decks" tab.

I also noticed that when refreshing at /myDeck or /explore no content renders at all.

• javascript
• reactjs
• ionic-framework
• ionic5

Share Improve this question Follow asked Mar 10, 2020 at 7:23 Marcos J.C KichelMarcos J.C Kichel 7,21999 gold badges4141 silver badges8181 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

According to the React Tabs starter template you have to nest the IonRouterOutlet inside of IonTabs, which is nested in IonReactRouter.

Here's how their App.tsx looks like:

  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path="/tab1" ponent={Tab1} exact={true} />
          <Route path="/tab2" ponent={Tab2} exact={true} />
          <Route path="/tab3" ponent={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>

For me it worked that way. Anyway Ionic+React documentation is not very detailed regarding things like that. One still has to search very much.

The solution was to wrap the tabs content with <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>
};

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

本文标签： javascriptReactIonic 5 Tab navigation problemsStack Overflow