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

【问题标题】：React: how to hide a component on certain pagesReact：如何在某些页面上隐藏组件
【发布时间】：2021-12-01 22:47:05
【问题描述】：

如何在我的应用程序的某些页面上隐藏某些组件？具体来说，我需要从设置页面中隐藏导航栏和标题。

在 App.js 中我设置了一个路由器：

<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 和 Navbar 用于除“设置”之外的每个组件。我该如何移除/隐藏它们？

如果重要的话，所有三个文件都是带有 useState 钩子的函数组件（如果它们甚至有状态）:)

【问题讨论】：

您需要修改布局的结构...在上面的示例中，您的 Header 和Navbar 超出了 Routes 的范围
这是您需要的结构：codesandbox.io/s/amazing-breeze-gg4l6?file=/src/App.js
@Ajith 谢谢你，把它们移到了 Switch 组件之外
@Chris G 现在可以使用了！谢谢！

标签： javascript reactjs components

【解决方案1】：

您可以渲染第二个切换器组件以仅路由到具有标题和导航栏 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>
    </>
  );
}

此外，正如 Ajith 所提到的，您不应该在 Switch 组件中包含要为每个路由（Header 和 Navbar）呈现的组件。

【讨论】：