React：如何在某些页面上隐藏组件

Question

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 :)

Answer 1

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.