本文共 4684 字，大约阅读时间需要 15 分钟。
react-router是伴随着react框架出现的路由系统，它也是公认的一种优秀的路由解决方案。在使用react-router时候，我们常常会使用其自带的路径跳转组件Link,通过<Link to="path"></Link>实现跳转，这和传统的<a href="path"></a>何其相似！但它们到底有什么具体的区别呢？
http://www.cnblogs.com/penghuwan/p/6623099.html?utm_source=tuicool&utm_medium=referral
对比<a>,Link组件避免了不必要的重渲染
A -- 通过<a>标签实现页面跳转：（图中的例子将会在下面详细解答）
-->
-->
B --通过<Link>组件实现页面跳转：
------>
react-router：只更新变化的部分从而减少DOM性能消耗
react的创新之处在于，它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新"，react-router很好地继承了这一点，譬如上图所示，导航组件和三个Tab组件（通过...,通过...,通过...）的重渲染是我们不希望看到的，因为无论跳转到页面一或是页面二，它只需要渲染一次就够了。<Link>组件帮助我们实现了这个愿望，反观<a>标签，每次跳转都重渲染了导航组件和Tab组件试想一下，在一个浩大的项目里，这多么可怕！我们的"渲染"做了许多"无用功"，而且消耗了大量弥足珍贵的DOM性能！
react-router的使用
1用npm安装依赖：通过终端进入项目目录里，写入npm install react-router安装react-router;
2从react-router的包里导入自带的组件如Router,Route等，一个简单的路由组件是这样的：
import React from 'react';import { Router, Route, browserHistory} from 'react-router'ReactDOM.render( , document.getElementById('root')); 其中App和PageOne,PageTwo是已定义的react组件
react-router的两大组件--Router和Route
1.Router组件
Router组件是react-router的基础组件，它位于最外层，作用是使UI和URL保持同步，要实现这一点需要向Router组件写入history属性值，Router的history属性有两个值：browserHistory和hashHistory(注：这两个值也是从react-router包中导入的)
-
browserHistory和hashHistory的区别？
更改路由的方式不同
1.browserHistory 使用的是 HTML5 的 pushState API来修改浏览器的历史记录
2.hashHistory 是通过改变地址后面的 hash（也就是URL中#后面的值） 来改变浏览器的历史记录。
两种方式的特点
1.History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法，所以browserHistory有替换历史记录的功能,hashHistory没有
2hashHistory实现简单，不需要做额外的服务端改造
2.Route组件
Route组件的Props对象中包含有path和component两个属性。根据当前URL和path属性的比对，Route组件配合其他的Route组件将包裹的子组件映射成完整的组件树
- path属性：URL的路径，且子Route的path将与父Route的path组合起来，例如：
包裹Son组件的Route和包裹Father的Route是父Route和子Route的关系，所以子Route对应的URL为'/'+'son'='/son'
- path的路径匹配语法：
：paramName -->匹配一段位于 /、? 或 # 之后的 URL
（）-->匹配可选字段
* -->匹配任意字段
// 匹配 /hello/michael 和 /hello/ryan // 匹配 /hello, /hello/michael 和 /hello/ryan // 匹配 /files/hello.jpg 和 /file/path/to/hello.jpg
- component属性：
当匹配到 URL 时，单个的组件会被渲染。它可以 被父 route 组件的 this.props.children 渲染。
- Route组件将以下属性通过props注入component组件中
children属性：子Route所包裹的component
params属性：URL的动态字段
location:当前的location对象
router属性：一个对象，包含有与路由跳转有关的方法如push(url),repalce(url),go(n),goBack(),goForward()等等（下文提及）
所以，Route包裹的组件可通过props.chidren,props.params的方式去引用这些属性
React-router的静态跳转和动态跳转
-
静态跳转 --通过<Link>组件实现静态跳转（文章开头demo的代码）
import React from 'react';import { Router, Route, browserHistory,Link} from 'react-router' import ReactDOM from 'react-dom';class App extends React.Component{ render(){ return ( 导航
通过a标签跳转到页面一 通过Link组件跳转到页面一 通过Link组件跳转到页面二 {this.props.children} ) }}const PageOne = (props) => { return ( 页面一
)}const PageTwo = (props) => { return ( 页面二
)}ReactDOM.render( , document.getElementById('root')) demo:
-------->
-
动态跳转 --通过Route注入component中的route属性实现动态跳转
上面我们通过Link组件实现了路径的跳转，但这种方式也有一定的局限性。
第一，它是静态的，也就是必须以写入组件的方式实现跳转；
第二，它没办法提供"时光旅行"的功能，比如：跳到历史记录中的前一个界面，后一个界面，前N个界面，后N个界面，等等
那么，我们能不能通过调用一个方法的方式去动态地实现路径跳转呢？上文提到的从Route组件中传入component中的router属性对象解决了这个问题：
- router.push('url') -->跳到URL为url的页面
- router.goBack() -->返回上一个页面
- router.goForward() --> 去往历史记录中的下一个页面
- router.go(n): -->n为正数表示向前跳跃，n为负数表示向后跳跃
下面我们基于第一个例子实现这样一个功能，当在从导航跳转到页面一的时候，通过点击按钮调用函数router.push('／')跳回初始的导航页面
import React from 'react';import { Router, Route, browserHistory,Link} from 'react-router'import ReactDOM from 'react-dom';class App extends React.Component{ render(){ return ( 导航
通过a标签跳转到页面一 通过Link组件跳转到页面一 通过Link组件跳转到页面二 { this.props.children} ) }}const PageOne = (props) => { console.log(props.router) return ( 页面一
)}const PageTwo = (props) => { return ( 页面二
)}ReactDOM.render( ,document.getElementById('root') ) demo如下：
---->
React-router官方英文文档地址：
https://github.com/ReactTraining/react-router/tree/v3/docs
React-router官方中文文档地址：
（注意！英文为Version3版本，与暂处于Version2的中文文档有一定差别，注意区分）