react-router学习~ 更多的嵌套

reactjs · Fridolph · Aug 5, 2016 · Aug 5, 2016 · Aug 7, 2016 · Aug 8, 2016
commit 7566e28740502cce8acef3df7d2c1348ebe572c0
diff --git a/lessons/03-navigating-with-link/index.js b/lessons/03-navigating-with-link/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+/*import React from 'react'
 import { render } from 'react-dom'
 import { Router, Route, hashHistory } from 'react-router'
 import App from './modules/App'
@@ -12,3 +12,19 @@ render((
     <Route path="/about" component={About}/>
   </Router>
 ), document.getElementById('app'))
+*/
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Router, Route, hashHistory } from 'react-router'
+import App from './modules/App'
+import About from './modules/About'
+import Repos from './modules/Repos'
+
+ReactDOM.render(
+  <Router history={hashHistory}>
+    <Route path="/" component={App}/>
+    <Route path="/repos" component={Repos}/>
+    <Route path="/about" component={About}/>
+  </Router>,
+  document.getElementById('app')
+)
diff --git a/lessons/03-navigating-with-link/modules/App.js b/lessons/03-navigating-with-link/modules/App.js
@@ -1,7 +1,18 @@
 import React from 'react'
+import { Link } from 'react-router'
 
 export default React.createClass({
   render() {
-    return <div>Hello, React Router!</div>
+    return (
+      <div>
+        <h1>React Router Tudorial</h1>
+        <ul role="nav">
+          <li><Link to="/about" >About</Link></li>
+          <li><Link to="/repos" >Repos</Link></li>
+        </ul>
+      </div>
+    )
   }
 })
+
+
diff --git a/lessons/04-nested-routes/modules/App.js b/lessons/04-nested-routes/modules/App.js
@@ -10,6 +10,7 @@ export default React.createClass({
           <li><Link to="/about">About</Link></li>
           <li><Link to="/repos">Repos</Link></li>
         </ul>
+        {this.props.childre}
       </div>
     )
   }

diff --git a/lessons/05-active-links/index.css b/lessons/05-active-links/index.css
@@ -0,0 +1,3 @@
+.active{
+  color: green;
+}
diff --git a/lessons/05-active-links/index.html b/lessons/05-active-links/index.html
@@ -2,5 +2,6 @@
 <html>
 <meta charset=utf-8/>
 <title>My First React Router App</title>
+<link rel="stylesheet" href="index.css" />
 <div id=app></div>
 <script src="bundle.js"></script>
diff --git a/lessons/05-active-links/modules/App.js b/lessons/05-active-links/modules/App.js
@@ -1,14 +1,15 @@
 import React from 'react'
 import { Link } from 'react-router'
+import NavLink from './NavLink'
 
 export default React.createClass({
   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>
         {this.props.children}
       </div>

diff --git a/lessons/05-active-links/modules/NavLink.js b/lessons/05-active-links/modules/NavLink.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+  render() {
+    return (
+      <Link {...this.props} activeClassName="active"></Link>
+    )
+  }
+})
diff --git a/lessons/06-params/index.js b/lessons/06-params/index.js
@@ -4,11 +4,14 @@ import { Router, Route, hashHistory } from 'react-router'
 import App from './modules/App'
 import About from './modules/About'
 import Repos from './modules/Repos'
+import Repo from './modules/Repo'
 
 render((
   <Router history={hashHistory}>
     <Route path="/" component={App}>
       <Route path="/repos" component={Repos}/>
+      {/* add the new route */}
+      <Route path="/repos/:userName/:repoName" component={Repo}/>
       <Route path="/about" component={About}/>
     </Route>
   </Router>

diff --git a/lessons/06-params/modules/Repo.js b/lessons/06-params/modules/Repo.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h2>{this.props.params.repoName}</h2>
+      </div>
+    )
+  }
+})
diff --git a/lessons/06-params/modules/Repos.js b/lessons/06-params/modules/Repos.js
@@ -1,7 +1,18 @@
 import React from 'react'
+import NavLink from './NavLink'
 
 export default React.createClass({
   render() {
-    return <div>Repos</div>
+    return (
+      <div>
+        <h2>Repos</h2>
+        {/* add some links */}
+        <ul>
+          <li><NavLink to="/repos/reactjs/react-router">React-router</NavLink></li>
+          <li><NavLink to="/repos/facebook/react">React-Link</NavLink></li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
   }
 })
diff --git a/lessons/07-more-nesting/index.js b/lessons/07-more-nesting/index.js
@@ -9,8 +9,9 @@ import Repo from './modules/Repo'
 render((
   <Router history={hashHistory}>
     <Route path="/" component={App}>
-      <Route path="/repos" component={Repos}/>
-      <Route path="/repos/:userName/:repoName" component={Repo}/>
+      <Route path="/repos" component={Repos}>
+        <Route path="/repos/:userName/:repoName" component={Repo} />
+      </Route>      
       <Route path="/about" component={About}/>
     </Route>
   </Router>

diff --git a/lessons/07-more-nesting/modules/Repos.js b/lessons/07-more-nesting/modules/Repos.js
@@ -1,14 +1,16 @@
 import React from 'react'
-import { Link } from 'react-router'
+import NavLink from './NavLink'
 
 export default React.createClass({
   render() {
     return (
       <div>
         <h2>Repos</h2>
         <ul>
-          <li><Link to="/repos/reactjs/react-router">React Router</Link></li>
-          <li><Link to="/repos/facebook/react">React</Link></li>
+          <li><NavLink to="/repos/reactjs/react-router">React-router</NavLink></li>
+          <li><NavLink to="/repos/facebook/react">React</NavLink></li>
+          {/* will render 'Repo.js' when at /repos/:userName/:repoName */}
+          {this.props.children}
         </ul>
       </div>
     )
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ export default React.createClass({ @@
               <li><Link to="/about">About</Link></li>
               <li><Link to="/repos">Repos</Link></li>
             </ul>
+            {this.props.childre}
           </div>
         )
       }
@@ Expand Down @@