完蛋了，上司最近都和顏悅色的，搞得我跑路的決心大大減退，不過還是要跑路。畢竟面向工資編程。今天一天基本都在挑項目的CSS，由于是別人哪里直接copy的，然后css我也直接copy的codepen上的源碼，忘記編譯一下，導致搞了半天的時間再調樣式。然后剩余時間學了會兒react-router。

1. react-router用url來進行判斷，提供react組件但是不刷新整個頁面，加載很迅速。
2. 首先引入三大類 `import {hashHistory, Router, Route} from 'react-router'`,其中hashHistory用來在url的后部增加一些hash數據， Router是最外面一層， Route是Router的組件，可以拿來互相嵌套。
3. 最外層`<Router history={hashHistory}> .... </Router>`
4. 里面一層 `<Route component={Index} path="/"> ... </Route>`,其中Index是React寫好的單獨組件，在訪問path屬性的url時，會顯示出該組件。
5. 嵌套Route`<Route component={Index} path="/"><Route component={ListDetail} path="details"></Route></Route>`,在Index頁面中需要寫`{this.props.childern}`,Index和ListDetial都是單獨寫好的組件，在訪問/#/details時，會顯示Index和ListDetial的嵌套頁面,ListDetail的位置出現在剛才寫的this.props.childern出現的位置。
6. 嵌套url傳值，`<Route component={ComponentList} path="/list/:id"></Route>`,在list頁面中寫`{this.props.params.id}`,就能獲得url中的id部位。比如訪問http://localhost:8080/#/list/12341111,id就等于12341111，可以直接顯示。

以上，感謝閱讀。

總結

以上是生活随笔為你收集整理的17-7-26-react-router入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。