学习笔记：react-router4

项目中使用react-router4，但一直是照猫画虎，没有系统的整理过。
一、react-router简介：
react-router是专门用来实现一个SPA（single page web application）应用的一个react插件库。SPA应用只有一个完整的页面，点击页面中的路由链接（/标签）既不会进行页面跳转也不会向服务器发起请求。
二、需了解的知识：
1、history: History 对象包含用户（在浏览器窗口中）访问过的 URL。History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。HTML5规范给我们提供了一个History接口，使用该接口可以自由操纵历史记录。react-router就是通过操控history对象来实现路由跳转。
history库：https://github.com/ReactTraining/history 感兴趣的朋友可以去看看，其中包装的是原生BOM中window.history和window.location.hash。
historyAPI：
1）.History.createBrowserHistory(): 得到封装window.history的管理对象
2）.History.createHashHistory(): 得到封装window.location.hash的管理对象
3）.history.push(): 添加一个新的历史记录
4）.history.replace(): 用一个新的历史记录替换当前的记录
5）.history.goBack(): 回退到上一个历史记录
6）.history.goForword(): 前进到下一个历史记录
7）.history.listen(function(location){}): 监视历史记录的变化
2、路由：路由本质上说就是k-v结构的一个映射关系，key为路由路径, value可能是function/component。
三、react-router API：
1、React-router
React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom 操作进行跳转的api。
2、React-router-dom
React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。
附：想详细了解API的朋友可以移步：https://reacttraining.com/react-router/web/api/NavLink/isactive-func 官网有详细的介绍和demo。
经常用到的：
1)BrowserRouter
2)HashRouter
3)Route
4)Redirect
5)Link
6)NavLink
7)Switch
8)history对象
9)match对象
10)withRouter函数
补充：通过路由携带参数：
<Link to={${路由路径}/${参数}}>测试<//Link>
<Route path={${路由路径}/:${参数名}} component={组件}/>
注意这块匹配是通过：匹配所有而非正则表达式
接受参数可以通过match对象，this.props.match.param.参数名。