How Does React Routing Work With Tabs?

Ionic Framework Ionic React
1

Hello, im trying to make a login page with @ionic/react but when i make the page it still pops up with the tabs and also nothing with the page is resposive heres the code .

import { Redirect, Route, Switch } from 'react-router-dom';
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { ellipse, square, triangle } from 'ionicons/icons';
import Tab1 from './pages/Tab1';
import Tab2 from './pages/Tab2';
import Tab3 from './pages/Tab3';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';
import Register from './pages/Signup';
import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache} from '@apollo/client';
import { setContext } from 'apollo-link-context';

const httpLink = new HttpLink({ uri: "http://localhost:4000" })
const authLink = setContext(async (req, { headers }) => {
	const token = localStorage.getItem("token")

	return {
		...headers,
		headers: {
			Authorization: token ? `Bearer ${token}` : null
		}
	}
})

const link = authLink.concat(httpLink as any)
const client = new ApolloClient({
	link: link as any,
	cache: new InMemoryCache()
})


const App: React.FC = () => (
  <ApolloProvider client={client}>
  <IonApp>
    <IonReactRouter>
    <Route exact path="/register" >
          <Register/>
          </Route>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/tab1">
            <Tab1 />
          </Route>
          <Route exact path="/tab2">
            <Tab2 />
          </Route>
          <Route path="/tab3">
            <Tab3 />
          </Route>
          <Route exact path="/">
            <Redirect to="/register"/>
          </Route>
        </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>
  </ApolloProvider>

);

export default App;
2

here is one approach in stackoverflow - reactjs - Hide tabs on Login screen in Ionic React - Stack Overflow

2 Likes
3

The approach shared in the stackoverflow answer use condition logic to compose the routes.

Another less react-ideological approach is to directly find and hide the tab bars from the DOM.

For example:

const App: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
        <Content />
      </IonReactRouter>
    </IonApp>
  )
}

const PagesWithoutNavBar = [
  '/login',
  '/onboarding',
  '/register',
  '/admin/register',
]

// Must be placed inside a Router Component
function Content() {
  const router = useIonRouter()
  const pathname = router.routeInfo.pathname

  useLayoutEffect(() => {
    const e = document.querySelector('ion-tab-bar')
    if (!e) return
    const hideNavBar = PagesWithoutNavBar.includes(pathname)
    e.style.display = hideNavBar ? 'none' : 'flex'
  }, [pathname])

  return (
    <IonTabs>
      <IonRouterOutlet>
        <Route path="/onboarding" component={OnBoardingPage} />
        <Route path="/login" component={LoginPage} />
        <Route path="/profile" component={ProfilePage} />

        <Route path="/home" component={HomePage} />
        <Route path="/tab2" component={Tab2} />
        <Route path="/tab3" component={Tab3} />
      </IonRouterOutlet>

      <IonTabBar slot="bottom">
        <IonTabButton tab="tab1" href="/home">
          <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>
  )
}

export default App
1 Like
4

thanks and it works for me