L7: more nesting

index.js

@@ -2,14 +2,17 @@ import About from "./modules/About";
 import App from "./modules/App";
 import React from "react";
 import Repos from "./modules/Repos";
+import Repo from "./modules/Repo";
 import { render } from "react-dom";
 import { Router, Route, hashHistory } from "react-router";
 
 render((
   <Router history={hashHistory}>
     <Route path="/" component={App}>
+      <Route path="/repos" component={Repos}>
+        <Route path="/repos/:userName/:repoName" component={Repo} />
+      </Route>
       <Route path="/about" component={About} />
-      <Route path="/repos" component={Repos} />
     </Route>
   </Router>
   ), document.getElementById("app"));

modules/Repo.js

@@ -1,3 +1,11 @@
-/**
- * Created by fgm on 01/04/2016.
- */
+import React from 'react';
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        {this.props.params.repoName}
+      </div>
+    )
+  }
+});

modules/Repos.js

@@ -1,7 +1,15 @@
 import React from "react";
+import NavLink from "./NavLink";
 
 export default React.createClass({
   render() {
-    return <div>Repos</div>;
+    return <div>
+      <h2>Repos</h2>
+      <ul>
+        <li><NavLink to="/repos/reactjs/react-router">React router</NavLink></li>
+        <li><NavLink to="/repos/facebook/react">React</NavLink></li>
+      </ul>
+      {this.props.children}
+    </div>;
   }
 });