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

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

以上，感謝閱讀。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。