17-7-26-react-router入门

完蛋了，上司最近都和颜悦色的，搞得我跑路的决心大大减退，不过还是要跑路。毕竟面向工资编程。今天一天基本都在挑项目的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，可以直接显示。

以上，感谢阅读。