exercise

none
reactjs · tyw2015 · Mar 9, 2017 · Mar 10, 2017 · Mar 10, 2017 · 1bcd1b1369b0b5ce0d22bd559e3670c048203388
commit 1bcd1b1369b0b5ce0d22bd559e3670c048203388
diff --git a/lessons/01-setting-up/index.html b/lessons/01-setting-up/index.html
@@ -1,6 +1,18 @@
 <!doctype html public "storage">
 <html>
 <meta charset=utf-8/>
-<title>My First React Router App</title>
-<div id=app></div>
-<script src="bundle.js"></script>
+<head>
+	<title>My First React Router App</title>
+	<style>
+		.active{
+			background: #eee;
+		}
+	</style>
+</head>
+
+<body>
+	<div id=app></div>
+	<script src="bundle.js"></script>
+</body>
+
+</html>
diff --git a/lessons/01-setting-up/index.js b/lessons/01-setting-up/index.js
@@ -1,18 +1,20 @@
 import React from 'react'
 import { render } from 'react-dom'
 import App from './modules/App'
-import { Router, Route, hashHistory } from "react-router"
+import { Router, Route, hashHistory, IndexRoute } from "react-router"
 import About from "./modules/About.js"
 import Repos from "./modules/Repos.js"
-
+import Home from "./modules/Home"
 
 
 render((
   <Router history={hashHistory}>
-    <Route path="/" component={App}/>
-
-    <Route path="/repos" component={Repos}/>
-    <Route path="/about" component={About}/>
-
+    <Route path="/" component={App}>
+		<IndexRoute component={Home}/>
+   		<Route path="/repos" component={Repos}>
+	   		<Route path="/repos/:userName/:repoName" component={Repos}/>
+	   	</Route>
+   		<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
@@ -1,7 +1,24 @@
 import React from 'react'
+import {Link} from "react-router"
+import Navlink from "./Navlink"
+import Home from "./Home"
+
+
+
 
 export default React.createClass({
   render() {
-    return <div>Hello, React Router!</div>
+    return (
+		<div>
+			<h1>react router!</h1>
+			<ul role="nav">
+				<li><Link to="/about" activeStyle={{color:"red"}} activeClassName="active">about</Link></li>
+				<li><Link to="/repos" activeStyle={{color:"red"}} activeClassName="active">repos</Link></li>
+			</ul>
+
+
+			{this.props.children || <Home/>}
+		</div>
+    	)
   }
 })
diff --git a/lessons/01-setting-up/modules/Home.js b/lessons/01-setting-up/modules/Home.js
@@ -0,0 +1,16 @@
+/*
+* @Author: tyw
+* @Date:   2017-03-09 19:55:05
+* @Last Modified by:   tyw
+* @Last Modified time: 2017-03-09 19:55:56
+*/
+
+import React from "react"
+
+export default React.createClass({
+	render: function() {
+		return (
+			<div>Home</div>
+		);
+	}
+})
diff --git a/lessons/01-setting-up/modules/Navlink.js b/lessons/01-setting-up/modules/Navlink.js
@@ -0,0 +1,18 @@
+/*
+* @Author: tyw
+* @Date:   2017-03-09 18:59:13
+* @Last Modified by:   tyw
+* @Last Modified time: 2017-03-09 19:01:21
+*/
+
+import React from "react"
+import {Link} from "react-router"
+
+
+export default React.createClass({
+	render: function() {
+		return (
+			<Link {...this.props} activeClassName="active"></Link>
+		);
+	}
+})
diff --git a/lessons/01-setting-up/modules/Repos.js b/lessons/01-setting-up/modules/Repos.js
@@ -2,15 +2,26 @@
 * @Author: tyw
 * @Date:   2017-03-09 14:55:18
 * @Last Modified by:   tyw
-* @Last Modified time: 2017-03-09 14:58:36
+* @Last Modified time: 2017-03-09 20:27:10
 */
-
+import {Link} from "react-router"
 import React from "react"
+import Navlink from "./Navlink"
 
 export default React.createClass({
 	render: function() {
 		return (
-			<div>repos</div>
+			<div>
+				<h2>{this.props.params.repoName}</h2>
+
+				<ul>
+					<li><Navlink to="/repos/reactjs/react-router">react-router</Navlink></li>
+					<li><Navlink to="/repos/facebook/react">react</Navlink></li>
+				</ul>
+
+				{console.log(this.props.children)}
+
+			</div>
 		);
 	}
 })