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

这是因为您的组件处于根级别，因此它将在所有页面中呈现。

尝试将其作为子元素分别包含到ChooseRole，DashboardGeek和DashboardAdmin组件中。那应该可以解决问题。

Answer 2

有几种解决方法，这取决于您的应用程序规模，但是下面是最简单的IMO。

我认为您是在应用程序状态还是全局状态下使用布尔值或用户对象？尝试添加布尔值以渲染Nav，例如：{this.state.loggedIn ? <Nav /> : ''}

您还可以生成一个'AppTemplate'组件，该组件以props.children的形式传递路由，或将其包含在每个页面中。

隐藏/显示Navbar ReactJS

2 个答案: