隐藏/显示导航栏 ReactJS答案

【问题标题】：Hide / Show Navbar ReactJS隐藏/显示导航栏 ReactJS
【发布时间】：2019-02-25 16:51:07
【问题描述】：

我在尝试隐藏登录页面上的导航栏时遇到问题，但我不知道该怎么做。

你可以在这里看到我的代码：

    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>

请帮我解决这个问题。谢谢

【问题讨论】：

标签： reactjs react-router navbar router nav

【解决方案1】：

有几种方法可以解决这个问题，这取决于您的应用程序的规模，但 IMO 最简单的方法如下。

我会假设您在应用程序或全局状态中使用布尔值或用户对象？尝试添加一个布尔值来呈现导航，例如：{this.state.loggedIn ? <Nav /> : ''}

您还可以生成一个“AppTemplate”组件，将路由作为props.children 传递或将其包含在每个页面中。

【讨论】：

【解决方案2】：

这是因为您在根级别拥有组件，因此它会在所有页面中呈现。

尝试将其作为子组件分别包含在 ChooseRole、DashboardGeek 和 DashboardAdmin 组件中。这应该可以解决问题。

【讨论】：

您必须创建单独的文件/定义代表ChooseRole、DashboardGeek 和DashboardAdmin 的类。在他们的渲染方法中，只需包含<Nav />