Javascript 反应路由器中的父子路由

我正在使用react路由器在我的应用程序中的组件之间进行路由。如何在应用程序本身之外为登录页创建路由？即，用户登陆页面，登陆页面路由到应用程序，然后应用程序可以相应地路由导航栏中的组件/视图

我遇到的问题是导航栏也在登录页中不断填充

以下是路线：

// React
var React = require("react");
var Router = require("react-router");
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;
var DefaultRoute = Router.DefaultRoute;

var App = require('./components/App.js');
var About = require('./components/About.js');
var Concat = require('./components/Concat.js');
var Home = require('./components/Home.js');
var Landing = require('./components/Landing.js');
var Login = require('./components/Login.js');
var Search = require('./components/Search');
var Signup = require('./components/Signup');

var routes = (
  <Route path="/" handler={App}>
    <DefaultRoute handler={Landing} />
    <Route name="about" handler={About}/>
    <Route name="concat" handler={Concat}/>
    <Route name="home" handler={Home}/>
    <Route name="login" handler={Login}/>
    <Route name="search" handler={Search}/> 
    <Route name="signup" handler={Signup}/>       
  </Route>
);

module.exports = routes;

//反应
var React=要求（“React”）；
var路由器=要求（“反应路由器”）；
var-Route=路由器.Route；
var NotFoundRoute=Router.NotFoundRoute；
var DefaultRoute=Router.DefaultRoute；
var-App=require（'./components/App.js'）；
var About=require（'./components/About.js'）；
var Concat=require（'./components/Concat.js'）；
var Home=require（'./components/Home.js'）；
var Landing=require（'./components/Landing.js'）；
var Login=require（'./components/Login.js'）；
var Search=require（“./components/Search”）；
var Signup=require（“./components/Signup”）；
变量路由=(
);
module.exports=路线；

这是App.js

var React  = require('react');
var Navbar = require('./Navbar.js');
var Router = require('react-router');
var Landing = require('./Landing.js');

var RouteHandler = Router.RouteHandler;

var App = React.createClass({
  render: function () {
    return (
      <div className="app-wrapper">
        <Navbar />
        <RouteHandler />
      </div>
    );
  }
});

module.exports = App;

var React=require（'React'）；
var Navbar=require（'./Navbar.js'）；
var-Router=require（'react-Router'）；
var Landing=require（'./Landing.js'）；
var RouteHandler=Router.RouteHandler；
var App=React.createClass({
渲染：函数（）{
返回(
);
}
});
module.exports=App；

这是导航栏：

var React  = require('react');
var Router = require('react-router');
var Link = Router.Link;

var Navbar = React.createClass({
  render: function () {
    return (
      <div className="navbar navbar-default navbar-static-top">
        <div className="container">
          <div className="navbar-header">
            <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span className="icon-bar">test</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
          </div>
          <div className="collapse navbar-collapse">
            <ul className="nav navbar-nav">
              <li className="active"><Link to="home">Jobletics</Link></li>
              <li><Link to="concat">Create a Listing</Link></li>
              <li><Link to="search">Search Jobs</Link></li>
              <li><Link to="about">About</Link></li>
            </ul>
            <ul className="nav navbar-nav navbar-right">
              <li><Link to="login">Log in</Link></li>
              <li><Link to="signup">Sign up</Link></li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});

module.exports = Navbar;

var React=require（'React'）；
var-Router=require（'react-Router'）；
var-Link=路由器.Link；
var Navbar=React.createClass({
渲染：函数（）{
返回(
测验

职业体育
创建一个列表
找工作
关于


登录
报名

);
}
});
module.exports=导航栏；

---

有什么想法吗？

在这种情况下，我会检查当前路线是否为着陆路线，然后相应地隐藏导航栏。您也可以重新构造路由或组件中的html，但如果只有一条路由是例外，我只会检查当前路由是否正在着陆。

您可以尝试链接此

  <BrowserRouter  >
                 <Route push={true} path="/users/activation/:atoken" component={Activation}/> 
  </BrowserRouter>

---

您能提供一段代码片段或一个要查看的源代码吗