Скрыть / показать Navbar ReactJS

Question

У меня проблема при попытке скрыть панель навигации на моей странице входа, но я не знаю, как это сделать.

Вы можете увидеть мой код здесь:

    render() {
    return (
      <Router>
          <div >
          <Nav />
          <button type="button" className="form-submit_logout" onClick= 
{this.handleLogout.bind(this)}>Logout</button>

          <Route path="/" exact component={Login}/>
          <Route path="/ChooseRole" exact component={ChooseRole}/>

          <Route path="/DashboardGeek" exact component= . 
{DashboardGeek}/>
          <Route path="/DashboardAdmin" exact component= . 
{DashboardAdmin}/>
          </div>
      </Router>

Пожалуйста, помогите мне решить эту проблему.Спасибо

Answer 1

Есть несколько способов обойти это, это зависит от масштаба вашего приложения, но IMO самое простое ниже.

Я бы предположил, что вы используете логический или пользовательский объект в вашем приложении или глобальном состоянии.?Попробуйте добавить логическое значение для визуализации Nav следующим образом: {this.state.loggedIn ? <Nav /> : ''}

Вы также можете сгенерировать компонент AppTemplate, который передает маршруты как props.children или включает его в каждую страницу.

Answer 2

Это потому, что у вас есть компонент на корневом уровне, поэтому он будет отображаться на всех страницах.

Попробуйте включить его как дочерний для ChooseRole, DashboardGeek и DashboardAdmin компонентов по отдельности.Это должно решить проблему.