时间戳

首页 > 解决方案 > React：如何在某些页面上隐藏组件

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

问题描述

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

在 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 钩子的函数组件（如果它们甚至有状态）:)

标签： javascriptreactjscomponents

解决方案

您可以渲染第二个切换器组件以仅路由到具有标题和导航栏 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 组件中拥有要为每个路由（标题和导航栏）呈现的组件。

推荐阅读