React 路由小结

Route：组件，配置实际路由，当一个location匹配到path时就渲染相应的UI，包含几个属性：

path（string）：路由匹配的路径

exact（Boolean）：true时，要求path与location.pathname完全匹配才渲染

strict（Boolean） ：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname

渲染UI的方法：

component ：path属性匹配的时候，渲染component的组件，route props（match，location，history） 也会一起被渲染，优先级高于render，通常都用这个。使用内联函数传值给 component 会发生不必要的重复装载。

render ：类似css内联样式的功能，直接渲染组件UI，但是不同的是，优先级不是最高的，对于内联渲染，不会发生重载问题。

children ：工作方式与render基本一致，只是不管地址是否匹配都会被调用

钩子函数：

onEnter：通常可以用来做认证

Router：是一个组件，内部包含其他页面UI组件，作用是保持UI和URL同步。在项目里，通常在入口js文件中使用。

<Router>组件内只允许存在一个元素，所以通常要用div包起来（跟render类似）

history：要实现 保持UI和URL同步，需要这个属性。两个属性值： browserHistory和hashHistory

区别：

    更改路由的方式不同

     1.browserHistory 使用的是 HTML5 的 pushState API来修改浏览器的历史记录

     2.hashHistory 是通过改变地址后面的 hash（也就是URL中#后面的值） 来改变浏览器的历史记录。

     两种方式的特点

      1.History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法，所以browserHistory有替换历史记录的功能,hashHistory没有

      2hashHistory实现简单，不需要做额外的服务端改造

还有就是，hashHistory 可以让react-router在cordova上运行使用，browserHistory针对浏览器端。

Link ：H5中的a标签一样的功能。

to(string,object)：要跳转的路径或者地址，对象的时候就可以带参数跳页了。

replace（bool）： 为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址； 为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。 默认为 false；

就理解为，假如路由跳转顺序：1-》2-》3-》4, 回退的时候即 4-》3-》2-》1，如果在跳3的时候replace设为 true，那么，3就在历史里替换掉了2，回退的话，就变成 4-》3-》1

activeStyle：可以定义不同的样式 activeStyle={{color：‘red’}}