How to not render Sidenav Bar for my Login component in React JS

Question

I am working on a ReactJS app in which I have designed a Side navigation bar to be available throughout my App. However, I don't want it to be displayed in my Login page as user should not see the app if he/she is not logged in.

Here is the code for my Side naviation bar (Sidebar.jsx):

return (
<Box sx={{ display: 'flex' }}>
  <CssBaseline />
  <Drawer
    variant="permanent"
    anchor="left"
  >
    <List>
      {sectionList.map(({ name, icon, link }, index) => (
        <ListItem key={name} component={Link} to={link} disablePadding>
          <ListItemButton>
            <ListItemIcon>
              {icon}
            </ListItemIcon>
            <ListItemText primary={name}/>
          </ListItemButton>
        </ListItem>
      ))}
    </List>
  </Drawer>
  <Box
    component="main"
    sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
  >
    <Topbar />
    {children}
  </Box>
</Box>
);

I have added it to my App.jsx.

import Sidebar from './components/Sidebar'


function App() {

  return (
    <Router>
      <AuthProvider>
        <Sidebar>
          <Routes>
            <Route exact path='/login' element={<Login />} />
            <Route exact path='/' element={
              <Private>
                <Home />
              </Private>
            } />
          </Routes>
        </Sidebar>
      </AuthProvider>
    </Router>
  )
}

export default App

As Sidebar is wrapped around Routes, it will be present for all the routes (or throughout the App). However, I don't want it to be in my Login page.

score -2 · Answer 1 · answered Aug 25 '23 at 08:13

You can do it by checking your current user state with conditional/ternary operator:

 <Router>
  <AuthProvider>
    {currentUser ?  <Sidebar> : null}
      <Routes>
        <Route exact path='/login' element={<Login />} />
        <Route exact path='/' element={
          <Private>
            <Home />
          </Private>
        } />
      </Routes>
    </Sidebar>
  </AuthProvider>
</Router>

Or via checking some properties of that user:

<Router>
  <AuthProvider>
    {currentUser.username.length > 0 ?  <Sidebar> : null}
      <Routes>
        <Route exact path='/login' element={<Login />} />
        <Route exact path='/' element={
          <Private>
            <Home />
          </Private>
        } />
      </Routes>
    </Sidebar>
  </AuthProvider>
</Router>

It's not correct way and will not work. – enggPS Aug 25 '23 at 11:15 — enggPS, Aug 25 '23 at 11:15

How to not render Sidenav Bar for my Login component in React JS

1 Answers1