react-router
路由配置
react 中路由的配置其实和vue基本上是一样的，首先引入需要的依赖模块
例如：import { Router, Route, BrowserHistory, Link } from 'react-router'
render((
<Router history={BrowserHistory}
<IndexRoute component={Login}/>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} /></Route>
</Route>
</Router>
), document.body)
Router 和 route 主要是用来对路由的视图的展示进行的配置，类似于vue中的router-view；主要是配置一下路由组件在哪里展示
Link 的功能类似于 a 标签的功能，实现单页面内路由的跳转，对应于vue就是我们经常用到的router-link
子路由的配置
例如：<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} /></Route>
</Route>
在vue中我们如果想在一个父组件中去展示一个子路由组件的话，我们就可以在父组件中加入 router-view 就可以了，但是在react 中首先受制于路由的定义的写法等原因我们在开发中一般都是直接嵌套组件，并不会这样去用路由去嵌套;如果要使用嵌套路由的话，这样的写法一般是实现不了的，通过这样的写法去访问 '/inbox/message/2’' 页面一般情况下是会报错的，展示一片空白；想要实现嵌套路由的话，就需要我们就需要引入：IndexRoute(默认路由)
动态路由的配置
如上，动态路由的定义方法也是通过冒号来实现的，访问的时候直接 ‘/message/2’ 就可以了
在配置路由的时候，我们在vue中通常是采用数组对象的形式来配置的，这样比router-->route 这样的标签形式看起来更加的直观更加的明了；当然在 react 中我们也可以定义一个数组对象，然后通过 map 遍历的方式，将其渲染成这种 router-->route 这样的形式；其实呢原生 route 数组对象也是支持数组对象的形式的；
例如： const routeConfig = {
path： '/',
childRoutes: [
{ path: 'home', component: Home}
]
}
render(<Router routes={routeConfig} />, document.body)
History
在路由的使用中，history 的主要作用在于去监听浏览器地址栏的变化，并解析这个 url 转换为 location 对象，然后 router 使用它来匹配到路由，最终正确的显示对应的组件常用的 history 有三种形式： hashHistory(哈希历史纪录)、browserHistory(浏览器历史记录)、createMemoryHistory(创建内存地址记录); 任何的前端框架都是建立在原生 js 的基础上而来的，所以，react 中的路由也是由原生 js 的 window.location 方法通过封装而演化的；通过对popstate、DOMContentLoaded 的监听得到 url 的变化，然后获取到一系列的路由参数进一步来实现视图的渲染例如： hashHIstory 其实就是通过 utils.extractHashPath(window.location.href)，从而拿到 window.location.hash 的值，然后通过{this.props.children} 来进行页面的切换和渲染browserHistory 同理也是通过获取相应的 pathName 来进行视图的切换；
在 vue 中 history 是通过 mode 还控制的，默认的是方式是 hash 模式，除了hash 模式之外可以采用 history 模式，history 的表现形式是和 browserHistory 一样的；
例如：window.onhashchange = onhashchange
window.addEventListener('popstate', onPopState)
window.addEventListener('DOMContentLoaded', onLoad)
function onhashchange(){
console.log(window.location.hash, '--onhashchange')
}
function onLoad(){
console.log(window.location.hash, '--onLoad')
}
function onPopState(){
console.log(window.location.pathname, '--onPopState')
}
路由的守卫
在 react 中也是存在路由的守卫的，类似于 vue 中的 beforeEach、afterEach，react-router 中存在 onEnter、onLeave 钩子，可以去实现对路由的监控
例如：
const enter = (nextState, replace) => {
console.log('进来')
}
const leave = (nextState, replace) => {
console.log('离开')
}
<Route path="about" component={About}，onEnter: enter, onLeave: leave />
如果是采用对象的写法，则只需
{
path: '/',
childRoutes: [
{ path: 'home', component: Home, onEnter: requireAuth, onLeave: leave }
]
}
