How do i hide certain components on certain pages in my app? Specifically I need to hide Navbar and Header from the Settings page.
in App.js i set up a router:
<div>
<Router>
<Switch>
<Header/> <- header and navbar are here
<Navbar/>
<Route exact path = "/" component= { Data } />
<Route path = "/available-data" component= { Data } />
<Route path = "/devices" component= { Devices } />
<Route path = "/contacts" />
<Route path = "/chat" />
<Route path = "/settings" component = { Settings } /> <- i need to remove them from here
</Switch>
</Router>
</div>
Header and Navbar are used in every component except in Settings. How do i go about removing/hiding them?
All three of the files are function components with useState hooks(if they even have state) if it matters :)
You can render a second switcher component to only route to pages with the header and navbar UI.
// in App.js
<div>
<Router>
<Switch>
<Route exact path="/settings" component={Settings} />
<Route path='/' ><UiRouter /></Route>
</Switch>
</Router>
</div>
// in UiRouter.js
export default function UiRouter() {
return (
<>
<Header />
<Navbar />
<Switch>
<Route exact path="/" component={Data} />
<Route path="/available-data" component={Data} />
<Route path="/devices" component={Devices} />
<Route path="/contacts" component={Contacts}/>
<Route path="/chat" component={Chat}/>
</Switch>
</>
);
}
Also, as Ajith mentioned, you should not have the components that you want to render for each route (Header and Navbar) inside the Switch component.