CODEWITHSUNDEEP
reactjsnavigationsidenav
Inno Namsu
Inno Namsu

Reputation: 1

How can i unshow my Global SideNav and TopNav when user is not logged in... and show only login page

const App=()=> {

    const token = localStorage.getItem("token")
    return (
        
        <div className="App">
            <Sidebar/>
            <Box sx={{
                display: 'flex',
                flexDirection:'column',
                width: '100%',
                    }}>
                <Topbar/>
                <main className="content">
                    <MainRoutes/>
                </main>
            </Box>
        </div>
    
    ); 
}

This is my app function where it renders the Mainroutes

const MainRoutes=() => {
  return (

    <Routes>
       <Route path="/login"   element={<Login/>}/>

        <Route path="/" element={<Protectedroutes/>}>
          <Route path="/" element={<InnerContent/>}>
            <Route path="/" element={<Navigate replace to="dashboard" />} />
            <Route path="/dashboard" element={<Dashboard/>}/>
            <Route path="/Manageteam" element={<Manageteam/>}/>
            <Route path="/Agentlist" element={<Agentlist/>}/>
            <Route path="/Transhistory" element={<Transhistory/>}/>
            <Route path="/Transdetails" element={<Transdetails/>}/>
            <Route path="/Summaryreport" element={<Summaryreport/>}/>
            <Route path="/GameResults" element={<GameResults/>}/>
            {/* <Route path="/Reports" element={<Reports/>}>
                <Route path="/Reports" element={<Navigate replace to="Tab1" />} />
                <Route path="Tab1" element={<Tab1/>}/>
                <Route path="Tab2" element={<Tab2/>}/>
            </Route> */}
          </Route>
        </Route>
       
    </Routes>

  )
}

and this is my routing

when user is logged out it renders on my (main content on app) how can i just show the login page when user is not logged in

UPDATE: I tried using this tenary operator(token && on return) on my topnav component and it works when i click the logout button. but the sideNav is Still there it needs refresh.

  const logout=()=>{
    localStorage.removeItem("token");
    navigate('/login');
  }
  return (token &&
    <Box sx={{
        background: `${colors.yellow[101]}`,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 50,
    }}>
        <Typography variant="h5">X2XBET Account Management</Typography>
          <Box>
            <IconButton onClick={logout}>
               <LogoutRoundedIcon />
            </IconButton>
        </Box>
    </Box>
    )
  }

im guessing the sidenav doesnt get the remove token ??

Upvotes: 0

Views: 20

Answers (0)

Related Questions