Finish lesson 8: Add IndexRoute 使组件不在this.props.children中

Author: TsaiKoga

lessons/08-index-routes/index.js

@@ -1,14 +1,20 @@
 import React from 'react'
 import { render } from 'react-dom'
-import { Router, Route, hashHistory } from 'react-router'
+// add `IndexRoute` to 'react-router' imports
+import { Router, Route, hashHistory, IndexRoute} from 'react-router'
 import App from './modules/App'
 import About from './modules/About'
 import Repos from './modules/Repos'
 import Repo from './modules/Repo'
+// and the Home component
+import Home from './modules/Home'
 
 render((
   <Router history={hashHistory}>
     <Route path="/" component={App}>
+      {/* add it here, as a child of `/` */}
+      <IndexRoute component={Home}/>
+
       <Route path="/repos" component={Repos}>
         <Route path="/repos/:userName/:repoName" component={Repo}/>
       </Route>

lessons/08-index-routes/modules/App.js

@@ -10,7 +10,7 @@ export default React.createClass({
           <li><NavLink to="/about">About</NavLink></li>
           <li><NavLink to="/repos">Repos</NavLink></li>
         </ul>
-        {this.props.children}
+        {this.props.children || <Home />}
       </div>
     )
   }

lessons/08-index-routes/modules/Home.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>Home</div>
+    )
+  }
+})