隐藏特定页面上的组件

时间:2018-09-03 09:17:25

标签: reactjs hide router

我有这种类型的结构:

        <Router onUpdate= {scrollToTop} history={history}>
        <div>
        <Navbar/> 

          <ScrollToTopRoute exact path="/" component={home} />
          <ScrollToTopRoute path="/fund" component={fund} />
          <ScrollToTopRoute path="/browseideas" component={browseideas} />
          <ScrollToTopRoute path="/earnwithus" component={earnwithus} />
          <ScrollToTopRoute path="/register" component={RegisterPage} />
          <ScrollToTopRoute path="/login" component={LoginPage} />

          <ScrollToTopRoute path="/idea" component={idea} />

          <ScrollToTopRoute path="/lightning" component={Lightning} />
          <ScrollToTopRoute path="/storm" component={Storm} />
          <ScrollToTopRoute path ="/increase" component ={increase}/>
          <ScrollToTopRoute path ="/policy" component ={policyprivacy}/>

          <PrivateRoute path ="/homepage" component ={homepage}/>

          <PrivateRoute path ="/activehedges" component ={ActiveHedges}/>
          <PrivateRoute path ="/userprofile" component ={UserProfile}/>
          <PrivateRoute path ="/myfunds" component ={MyFunds}/>

          <PrivateRoute path ="/deposit" component ={deposit}/>
          <PrivateRoute path ="/withdraw" component ={withdraw}/>

        <Footer/>
        </div>
      </Router>

导航栏和页脚应该在每个页面上,而不是RegisterPage和LoginPage。

如何隐藏<Navbar/> <Footer/> 与添加到每个页面的方式不同,这是推荐做法吗?

1 个答案:

答案 0 :(得分:2)

您可以使用一些默认的状态,设置类似 registered:false

的内容。

在您的父组件中:

<Navbar/>

然后,在<Footer/>if(!this.state.registered){ // Hide component } else { // Show component } 内,检查注册是否为假或真:

Uncaught SyntaxError: missing ) after argument list

当然,一旦注册了用户,就需要将注册设置为true