L4: Nested routes

index.js

@@ -7,8 +7,9 @@ import { Router, Route, hashHistory } from "react-router";
 
 render((
   <Router history={hashHistory}>
-    <Route path="/" component={App} />
-    <Route path="/about" component={About} />
-    <Route path="/repos" component={Repos} />
+    <Route path="/" component={App}>
+      <Route path="/about" component={About} />
+      <Route path="/repos" component={Repos} />
+    </Route>
   </Router>
   ), document.getElementById("app"));

modules/App.js

@@ -7,9 +7,11 @@ export default React.createClass({
       <div>
         <h1>React router tutorial</h1>
         <ul role="nav">
+          <li><Link to="/">Home</Link></li>
           <li><Link to="/about">About</Link></li>
           <li><Link to="/repos">Repos</Link></li>
         </ul>
+        { this.props.children }
       </div>
     );
   }