初探React-router實現導航
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
好久都沒有寫部落格了，一是因為最近工作也比較繁雜，二是在學習路由的時候卡了一下殼，三是工作找不到很是鬱悶。經過一段時間的嘗試，終於在學習的過程中邁出了一小步，實現了自己當初訂的一個小需求。由於還在學習過程中，就只是先拿出一點實際的效果和中間遇到的一些困難。(用react-router實現導航)
github:https://github.com/liuzaijiang/React-Router-Demo （這個是我們自己參考網上的Demo然後自己實現的一個路由導航例項）
參考的Demo:https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-index-routes
路由的基礎知識：http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu（阮一峰的入門部落格）
我眼中的路由:
把這個思路用到react 中去也是可以的，相應的內容就是我們的元件，我們可以根據點選某個導航來選擇渲染哪一個元件；這
裡其實就可以看到react的優勢，不顯示的內容不存在於DOM節點中，而用傳統的方法的話，不顯示的內容只是display:none而
已，這樣來說當你切換導航的時候就免去了不必要的重繪和重排；
當然，reacr-router也是解決這個的方法之一，我說一下我個人第一次用完後覺得它好的地方：
******************************************************************************************************************************
1. 首先它不用去判斷渲染哪個元件，它只需要為每個元件定義好一個path屬性，為每個導航欄定義好to屬性，指向我們需要顯
示的元件的path屬性，點選相應的導航欄即顯示相應元件（其實就是<a>標籤的效果，不過react-router是用<Link>這個標籤代替
了<a>標籤的作用），這樣我們不用去為每個導航欄去繫結事件。
2.然後<Link>本身有一個activeClassName這個屬性，這個屬性的好處就是為我們當前點選的導航欄增加樣式，這個真的是真
心棒的，如果要我們自己動手去實現這個你或許還需要為獲取當前是哪個導航欄被點選花一點功夫去寫程式碼，這裡我們直接拿來用
就好了。
3.最後，如果我們訪問點選了一個頁面的一個導航內容，重新整理之後頁面還是會顯示之前的導航內容，如果是不用路由的方法頁
面是會顯示預設的導航內容的；這個是因為使用路由後，頁面顯示的相應內容會在url中有具體的體現，比如我要看a內容，則是
http://www.this-is-a-spa.com/a，b內容則是http://www.this-is-a-spa.com/b，如果是傳統的導航顯示的話，整個頁面就只有一
個 url http://www.this-is-a-spa.com/
（我相信它的功能應該遠遠不至於此，只是我目前才疏學淺，還沒學到它更深的內容）
******************************************************************************************************************************
在網上查找了一些別人的看法：
1.什麼是前端路由？
路由是根據不同的 url 地址展示不同的內容或頁面
前端路由就是把不同路由對應不同的內容或頁面的任務交給前端來做，之前是通過服務端根據 url 的不同返回不同的頁面實現的。
2.什麼時候使用前端路由？
在單頁面應用(SPA)，大部分頁面結構不變，只改變部分內容的使用 (單頁 Web 應用 (single-page application 簡稱為 SPA) 是一種特殊的 Web 應用。它將所有的活動侷限於一個Web頁面中，僅在該Web頁面初始化時載入相應的HTML、JavaScript 和 CSS。一旦頁面載入完成了，SPA不會因為使用者的操作而進行頁面的重新載入或跳轉。而是利用 JavaScript 動態的變換HTML的內（採用的是div切換顯示和隱藏），從而實現UI與使用者的互動。由於避免了頁面的重新載入，SPA 可以提供較為流暢的使用者體驗。)
3.前端路由有什麼優點和缺點？
優點
使用者體驗好，不需要每次都從伺服器全部獲取，快速展現給使用者
缺點
使用瀏覽器的前進，後退鍵的時候會重新發送請求，沒有合理地利用快取
單頁面無法記住之前滾動的位置，無法在前進，後退的時候記住滾動的位置
________________________________________________________________________________________________________________________________
具體的實踐：(程式碼為前面的參考Demo)
首先來個最簡單的，效果就是一個頁面中有2個“導航”，點選則顯示相應的內容;
下面是關鍵程式碼：
index.js
import React from 'react'import { render } 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'import Repo from './modules/Repo'render(( <Router history={hashHistory}> <Route path="/" component={App}> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Route> </Router>), document.getElementById('app'))App.js
import React from 'react'import NavLink from './NavLink'export default React.createClass({ render() { return ( <div> <h1>React Router Tutorial</h1> <ul role="nav"> <li><NavLink to="/about">About</NavLink></li> <li><NavLink to="/repos">Repos</NavLink></li> </ul> {this.props.children} </div> ) }})這裡初學者要注意{this.props.children}這句話，是用來顯示我們路由對應的子元件的；（App裡面包含了Repos和About這2個元件）
當前上面這個還存在一個小問題：如果我頁面一進去想預設先顯示第一個導航怎麼辦？
我們這裡只需要利用IndexRoute這個標籤，寫好我們的預設路由即可：（記得在import中先定義好）
import React from 'react'import { render } from 'react-dom'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'render(( <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute path="/repos" component={Repos}/> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Route> </Router>), document.getElementById('app'))因為需求中導航中還有子導航，所以我們的就需要用到路由巢狀；
其實這個的難點在於：如何將我們的需求和路由的結構理清楚，對於初學者來說是一個比較費時的地方。
========================================================================
(我自己列的一個導航路由和元件的關係圖，對比程式碼看會清晰不少)
/repos/reactjs/react-router(Repo元件)
/repos(Repos元件){
/(App元件) { /repos/facebook/react(Repo元件)
/about(About元件)
========================================================================
先把這個關係列好~每層之間的路由關係其實也就是我們的導航與內容，導航與子導航之間的關係；
A.最開始頁面進入根路徑/，url就是http://localhost:8080/#/?_k=8a84lu 根路由是App元件
B.點選頁面中的About導航後渲染About元件，然後url會變成http://localhost:8080/#/about?_k=rf9brt
C.點選Repos導航的時候渲染Repos元件，url變成http://localhost:8080/#/repos?_k=a9umbj
D.再點選Repos下面的子導航React Router的時候，渲染Repo元件，url變成http://localhost:8080/#/repos/reactjs/react-router?_k=giihrr....這個就是我們能觀察到的現象
然後就是我們路由的程式碼書寫：
<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></Router>Repo.js
import React from 'react'export default React.createClass({ render() { return ( <div> <h2>{this.props.params.repoName}</h2> </div> ) }})Repos.js
import React from 'react'import NavLink from './NavLink'export default React.createClass({ render() { 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> ) }})這裡提一下：
path="/repos/:userName/:repoName"這個用到了路由的萬用字元，其實我們通過觀察，我們可以發現path屬性中的 :userName 和 :repoName就相當於我們的to屬性中的react.js 和react-router，個人認為就是函式中的形參和實參的關係，我們可以通過this.props.params.xxx來獲取相應的值。
最後我自己總結一下：
1.路由是可以用來區域性重新整理頁面的一種方式，主要是通過url的改變來渲染不同的元件，url中定義的路徑就是每個元件的“位置"，定義在我們的<Route>標籤中的path屬性中，然後我們通過<Link>標籤的to屬性來找到我們想要的路由，進而來渲染我們想要的元件；
2.我們是通過{ this.props.childern }來渲染我們的路由所對應的元件 （對於初學者如果遇到路由都對的情況下，還是不能渲染元件的時候，可以看看是不是掉了這句話）
3.我們可以把<Link>標籤類比我們的<a>標籤，而且它還具有activeClassName屬性，可以定義我們當前導航的樣式class，或者直接把樣式寫在activeStyle裡面也行。
4.使用<IndexRoute>標籤來定義我們的預設路由，即為我們的預設”導航“
5.在進行路由巢狀的時候畫一下關係對比圖，讓自己的大腦更加清晰，書寫程式碼的時候會更加流暢
(目前對於路由的研究是淺嘗輒止，繼續學習ing!)
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
