Tabs navigation routing + login page

Ionic Framework Ionic React
1

Hi guys,
I have started react-ionic application with a tabs template.

I have an idea to have a kind of welcome and login pages as the first pages of the application and after them navigate to the main screen with tabs navigation.

My App component looks like

const App: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route exact={true} path={'/welcome'} component={WelcomePage} />
          <Route exact={true} path={'/login'} component={LoginPage} />
          <Route exact={true} path={'/tabs'} component={AppTabs} />
          <Redirect exact={true} from={'/'} to={'/welcome'} />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};

In WelcomePage I just have a button with history.push('/login')
In LoginPage I have a button with history.push('/tabs') as well

I’m trying to figure out how navigation works so I don’t have a lot of logic here.

Here is the implementation of AppTabs

const AppTabs: React.FC<RouteComponentProps> = ({
  match,
}) => {
  return (
      <IonTabs>
        <IonRouterOutlet>
          <Route exact={true} path={'/tabs/tab1'} component={Tab1} />
          <Route exact={true} path={'/tabs/tab2'} component={Tab2} />
          <Route exact={true} path={'/tabs/tab3'} component={Tab3} />
          <Redirect exact={true} from={'/tabs/'} to={'/tabs/tab1'} />
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href={'/tabs/tab1'}>
            <IonIcon icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href={'/tabs/tab2'}>
            <IonIcon icon={ellipse} />
            <IonLabel>Tab 2</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href={'/tabs/tab3'}>
            <IonIcon icon={square} />
            <IonLabel>Tab 3</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
  );
};

So the flow works kinda correctly in WelcomePage -> LoginPage -> Tabs

And as a result of navigation I have this screen

image
image434×849 4.25 KB

But when I click on other tabs it makes the entire screen blank (white), and in styles I see that pages became hidden

image
image748×505 31.9 KB

So currently I have no idea how could I implement that behavior, where I have a couple of pages first, and after that navigate the app only in scope of tabs.

Appreciate any help!
Thank you in advance!

2

Here is a project that can get you started, and when you are further along if you post a sample project with the progress you have made, I can try to provide more specific help.

aaronksaunders/ionic-sidemenu-tabs-auth-starter: Ionic framework with ReactJS Components Starter using SideMenu with Tabs and Authentication Flow (github.com)