CODEWITHSUNDEEP
reactjsreact-router
PacSmack
PacSmack

Reputation: 13

Trying to hide a parent component on a specific page

So far the way me and my group have our app setup is that our navigation SideBar wraps all the pages so we don't have to pass it to every single page but I would like to hide in the login page, is there anyway to just hide it when the user is on the login page?

here's my routes

function App() {
    return (
        <ApolloProvider client={client}>
            <Router>
                <SideBar>
                    <Container maxWidth="xl" disableGutters={true}>
                        <Switch>
                            <Route exact path="/homepage" component={Homepage} />
                            <Route exact path="/" component={Login} />                          
                            <Route exact path="/dualFinder" component={DualFinder} />
                            <Route exact path="/dashboard" component={Dashboard} />
                            <Route exact path="/AboutChampion" component={AboutChampion} />
                            <Route component={Homepage} />
                        </Switch>
                    </Container>
                </SideBar>
                <Footer />
            </Router>
        </ApolloProvider>
    );
}

Upvotes: 1

Views: 269

Answers (2)

Peter Malik
Peter Malik

Reputation: 463

Yes, you can do this with conditional rendering. For example, you can use the useLocation hook from React Router to know when the user is on the login page. If the user is on the login page you do not render the side bar. Something like this:

import { useLocation } from 'react-router-dom'

const location=useLocation()

...
return(
.....
  {location==="your login pathname"?<DONT RENDER SIDEBAR>:<RENER SIDEBAR>}
.....
)

Upvotes: 1

Mert
Mert

Reputation: 142

You can pass the prop to Sidebar component called <Sidebar visible={visible} /> and the Sidebar component will be rendered only visible is true. And you can move the sidebar component down a few component so you can use useHistory and useLocation hooks from react-router-dom

Upvotes: 0

Related Questions