如何在登录时隐藏导航栏&注册页面的反应?

时间:2016-03-01 07:01:30

标签: reactjs react-router

我的路线是这样的:

<Route handler={AppContainer}>
 <Route path="login" handler={Login} />
 <Route path="signup" handler={Signup} />
 <DefaultRoute handler={Home} />
</Route>

我的AppContainer:

var AppContainer = React.createClass({
  render: function () {
    return (
      <div>
        <Header />
        <RouteHandler />
      </div>
    );
  }
});

这里Header组件在所有页面中呈现。有没有办法在登录和注册页面中避免标题。

1 个答案:

答案 0 :(得分:4)

这意味着您的组件(AppContainer)具有状态。因此你应该有类似的东西:

&#13;
&#13;
<link href="animate.css" rel="stylesheet">
<style type="text/css">
    body {
        font-family: helvetica;
    }
    h1 {
        font-size: 20em;
        text-align: center;
    }
    .item {
        margin: 300px auto 0 auto;
        color: black;
        text-align: center;
        -webkit-animation-duration: 2s;
        /* -webkit-animation-delay: 2s; */
        /*-webkit-animation-iteration-count: 2;*/
    }
    .why {
        margin: 300px auto 0 auto;
        color: black;
        text-align: center;
        -webkit-animation-delay: 2s;
        -webkit-animation-duration: 2s;
    }
</style>
</head>
<body>
    <div class="item animated fadeOut"><h1>Cities</h1></div>
    <div class="why animated fadeIn"><h1>WHY</h1></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
&#13;
&#13;
&#13;