# How Does React Routing Work With Tabs?

**URL:** <https://forum.ionicframework.com/t/how-does-react-routing-work-with-tabs/211065>\
**Category:** Ionic React\
**Created:** [June 14, 2021, 6:16pm UTC](https://forum.ionicframework.com/t/how-does-react-routing-work-with-tabs/211065 "2021-06-14T18:16:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bobbyque](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@bobbyque](https://forum.ionicframework.com/u/bobbyque)\
**Post date:** [June 14, 2021, 6:16pm UTC](https://forum.ionicframework.com/t/how-does-react-routing-work-with-tabs/211065/1 "2021-06-14T18:16:49Z")

</div>

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 .

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\
**Post date:** [June 16, 2021, 8:37pm UTC](https://forum.ionicframework.com/t/how-does-react-routing-work-with-tabs/211065/2 "2021-06-16T20:37:05Z")

</div>

here is one approach in stackoverflow - [reactjs - Hide tabs on Login screen in Ionic React - Stack Overflow](https://stackoverflow.com/questions/62359500/hide-tabs-on-login-screen-in-ionic-react)

---

<div class="post-metadata">

**Author:** ![aabbcc1241](https://avatars.discourse-cdn.com/v4/letter/a/c6cbf5/32.png) [@aabbcc1241](https://forum.ionicframework.com/u/aabbcc1241)\
**Post date:** [June 28, 2021, 1:28pm UTC](https://forum.ionicframework.com/t/how-does-react-routing-work-with-tabs/211065/3 "2021-06-28T13:28:59Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![sasitha92](https://avatars.discourse-cdn.com/v4/letter/s/b782af/32.png) [@sasitha92](https://forum.ionicframework.com/u/sasitha92)\
**Post date:** [May 26, 2022, 11:54am UTC](https://forum.ionicframework.com/t/how-does-react-routing-work-with-tabs/211065/4 "2022-05-26T11:54:41Z")

</div>

thanks and it works for me