Скрыть компоненты на определенной странице - PullRequest
Новая
       7

Скрыть компоненты на определенной странице

0 голосов
/ 03 сентября 2018

У меня есть такой тип структуры: 

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

Navbar & Footer должен быть на каждой странице, вместо RegisterPage & LoginPage.

Как мне спрятаться <Navbar/> <Footer/> по-другому, чем добавление на каждую страницу, это рекомендуемая практика?

1 Ответ

0 голосов
/ 03 сентября 2018

Вы можете использовать по умолчанию состояние , установив что-то вроде зарегистрирован: ложь

В вашем родительском компоненте: 

this.state = { registered: false };

Затем, внутри <Navbar/> и <Footer/>, проверьте, зарегистрировано ли значение false или true: 

if(!this.state.registered){
   // Hide component
} else {
   // Show component
}

Конечно, как только пользователь будет зарегистрирован, вам нужно будет установить его как true

...