概述
在web应用开发中，路由系统是不可或缺的一部分。在浏览器当前的URL发生变化时，路由系统会做出一些响应，用来保证用户界面与URL的同步。随着单页应用时代的到来，为之服务的前端路由系统也相继出现了。
React Router是一个基于React之上的强大路由库，是完整的React路由解决方案。
React Router保持UI与URL同步。它拥有简单的API与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。它可以让你向应用中快速地添加视图和数据流，同时保持页面与URL间的同步。
路由的基本原理
无论是传统的后端MVC主导的应用，还是在当下最流行的单页面应用中，路由的职责都很重要，但原理并不复杂，即保证视图和URL的同步，而视图可以看成是资源的一种表现。当用户在页面中进行操作时，应用会在若干个交互状态中切换，路由则可以记录下某些重要的状态，比如在一个博客系统中用户是否登录、在访问哪一篇文章、位于文章归档列表的第几页。而这些变化同样会被记录在浏览器的历史中，用户可以通过浏览器的前进、后退按钮切换状态，同样可以将URL分享给好友。简而言之，用户可以通过手动输入或者与页面进行交互来改变URL，然后通过同步或者异步的方式向服务端发送请求获取资源（当然，资源也可能存在于本地），成功后重新绘制UI，原理如下图所示：
Paste_Image.png
react-router的状态机特性
我们看到react-router中的很多特性都与React保持了一致，比如它的声明式组件、组件嵌套，当然也包括React的状态机特性，因为毕竟它就是基于React构建并且为之所用的。回想一下在React中，我们把组件比作是一个函数，state/props作为函数的参数，当它们发生变化时会触发函数执行，进而帮助我们重新绘制UI。那么在react-router中将会是什么样子呢？
在react-router中，我们可以把Router组件看成是一个函数，Location作为参数，返回的结果同样是UI，二者的对比如下图所示：
Paste_Image.png
上图说明了只要URL一致，那么返回的UI界面总是相同的。
安装
==npm安装
npm install --save react-router
npm install --save react-router-dom
==yarn安装
yarn add react-router
yarn add react-router-dom
==也可以使用React-Router CDN库
<script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>
引用模块
// 使用 ES6 的转译器，如 babel
import { HashRouter as Router, Route, Link } from 'react-router'
// 不使用 ES6 的转译器
var ReactRouter = require('react-router')
var Router = ReactRouter.HashRouter
var Route = ReactRouter.Route
var Link = ReactRouter.Link
也可以用BrowserRouter。
BrowserRouter和HashRouter的区别，目前看到的是url中有无#号。
注：
本教程相关的所以源码，可在https://github.com/areawen2GHub/reacttest.git下载
参考地址：
http://web.jobbole.com/84418/
https://react-guide.github.io/react-router-cn/index.html
https://reacttraining.com/react-router/web/example/basic
网友评论