title: Parent-child routes in React-Router
body: <p>I am using react-router to route between components in in my app. How do I create a route for a landing page outside the app itself? Ie., the user lands on the page and the LandingPage routes to the app, then the app can route the components/views in the navbar accordingly.</p>
  
  <p>The problem i'm running into is that the Navbar keeps populating in the landing page as well.</p>
  
  <p>Here are the routes:</p>
  
  <pre><code>// 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 = (
    &lt;Route path="/" handler={App}&gt;
      &lt;DefaultRoute handler={Landing} /&gt;
      &lt;Route name="about" handler={About}/&gt;
      &lt;Route name="concat" handler={Concat}/&gt;
      &lt;Route name="home" handler={Home}/&gt;
      &lt;Route name="login" handler={Login}/&gt;
      &lt;Route name="search" handler={Search}/&gt; 
      &lt;Route name="signup" handler={Signup}/&gt;       
    &lt;/Route&gt;
  );
  
  module.exports = routes;
  </code></pre>
  
  <p>This is App.js</p>
  
  <pre><code>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 (
        &lt;div className="app-wrapper"&gt;
          &lt;Navbar /&gt;
          &lt;RouteHandler /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  module.exports = App;
  </code></pre>
  
  <p>This is the Navbar:</p>
  
  <pre><code>var React  = require('react');
  var Router = require('react-router');
  var Link = Router.Link;
  
  var Navbar = React.createClass({
    render: function () {
      return (
        &lt;div className="navbar navbar-default navbar-static-top"&gt;
          &lt;div className="container"&gt;
            &lt;div className="navbar-header"&gt;
              &lt;button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                &lt;span className="icon-bar"&gt;test&lt;/span&gt;
                &lt;span className="icon-bar"&gt;&lt;/span&gt;
                &lt;span className="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div className="collapse navbar-collapse"&gt;
              &lt;ul className="nav navbar-nav"&gt;
                &lt;li className="active"&gt;&lt;Link to="home"&gt;Jobletics&lt;/Link&gt;&lt;/li&gt;
                &lt;li&gt;&lt;Link to="concat"&gt;Create a Listing&lt;/Link&gt;&lt;/li&gt;
                &lt;li&gt;&lt;Link to="search"&gt;Search Jobs&lt;/Link&gt;&lt;/li&gt;
                &lt;li&gt;&lt;Link to="about"&gt;About&lt;/Link&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul className="nav navbar-nav navbar-right"&gt;
                &lt;li&gt;&lt;Link to="login"&gt;Log in&lt;/Link&gt;&lt;/li&gt;
                &lt;li&gt;&lt;Link to="signup"&gt;Sign up&lt;/Link&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  
  module.exports = Navbar;
  </code></pre>
  
  <p>Any Ideas?</p>