lessons 05 finish

r2fresh · r2fresh · commit 39d38cdc70cf · 2016-10-17T14:14:02.000+09:00
diff --git a/lessons/01-setting-up/index.css b/lessons/01-setting-up/index.css
@@ -0,0 +1,3 @@
+.active {
+    color: green;
+}
diff --git a/lessons/01-setting-up/index.html b/lessons/01-setting-up/index.html
@@ -1,6 +1,7 @@
 <!doctype html public "storage">
 <html>
 <meta charset=utf-8/>
+<link rel="stylesheet" href="index.css" />
 <title>My First React Router App</title>
 <div id=app></div>
 <script src="bundle.js"></script>
diff --git a/lessons/01-setting-up/index.js b/lessons/01-setting-up/index.js
@@ -8,8 +8,9 @@ import Repos from './modules/Repos';
 
 render((
     <Router history={hashHistory}>
-        <Route path="/" component={App}/>
-        <Route path="/repos" component={Repos}/>
-        <Route path="/about" component={About}/>
+        <Route path="/" component={App}>
+            <Route path="/repos" component={Repos}/>
+            <Route path="/about" component={About}/>
+        </Route>
     </Router>
 ), document.getElementById('app'))
diff --git a/lessons/01-setting-up/modules/App.js b/lessons/01-setting-up/modules/App.js
@@ -8,16 +8,20 @@
 
 import React, { Component } from 'react';
 import { Link } from 'react-router';
+import NavLink from './NavLink';
 
 class App extends Component {
     render(){
         return (
             <div>
                 <h1>React Router Tutorial</h1>
                 <ul role='nav'>
-                    <li><Link to='/about'>About</Link></li>
-                    <li><Link to='/repos'>Repos</Link></li>
+                    <li><NavLink to='/about'>About</NavLink></li>
+                    <li><NavLink to='/repos'>Repos</NavLink></li>
                 </ul>
+
+                {/* add this */}
+                {this.props.children}
             </div>
         )
     }
diff --git a/lessons/01-setting-up/modules/NavLink.js b/lessons/01-setting-up/modules/NavLink.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router';
+
+class NavLink extends Component {
+    render(){
+        return <Link {...this.props} activeClassName="active"/>
+    }
+}
+
+export default NavLink;
