React-router

 官方文档：https://react-guide.github.io/react-router-cn/docs/guides/advanced/NavigatingOutsideOfComponents.html (强烈推荐)

 react-router入门可以看阮一峰老师的文章： http://www.ruanyifeng.com/blog/2016/05/react_router.html

　　react-router现在是4.x版本，但是3.x版本的react-router用的比较多一些，阮一峰老师所讲解的也是3.x版本，通过npm安装需要制定版本号，如 npm install [email protected] --save 。 

　　和vue-router非常类似， react-router实现单页面应用的方式也是用 hash 的变化来切换页面。同样地，react-router也是使用Router和Router来管理路由。同时分配了Link来点击路由，实际上就是一个a标签。  

　　基本使用方式如下：

　　其中，我们可以引入Router，作为一个容器，管理所有的路由，接着引入Route, 用来真正地定义路由，最后使用hashHistory是说通过路由的切换由URL的hash变化决定，即URL的<code>#</code>部分发生变化。举例来说，用户访问<code>http://www.example.com/</code>，实际会看到的是<code>http://www.example.com/#/</code>。  一般在vue中也是使用这种方式的，当然，在vue中我们也可以不用#来切换，但是这需要后端的配合。 

　　对于比较简单的React路由，通过下面这种方法就足够了：

　　但是对于复杂的路由，通常会用到嵌套路由：

　　但是这是App的写法就发生了变化，需要我们写为下面的形式：

　　

　　App 组件的写法如下：

　　而其中的path属性就是制定具体的url。 而后的component制定在当前的path下使用的组件。 

　　react-router是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 <code>location</code> 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。

常用的 history 有三种形式， 但是你也可以使用 React Router 实现自定义的 history。

browserHistory

hashHistory

createMemoryHistory

　　一般我们推荐的是browserHistory，即和hashHistory不同，他不会出现 # 的情况，看上去更加美观一些。 

　　但是使用这种方法，需要后端进行配合，如node端使用下面的方法，否则在刷新的时候会出现问题：

　　React Router 提供一个 <code>routerWillLeave</code> 生命周期钩子，这使得 React 组件可以拦截正在发生的跳转，或在离开 route 前提示用户。<code>routerWillLeave</code> 返回值有以下两种：

<code>return false</code> 取消此次跳转

<code>return</code> 返回提示信息，在离开 route 前提示用户进行确认。

　　你可以在 route 组件 中引入 <code>Lifecycle</code> mixin 来安装这个钩子。

　　使用这种方式可以使用钩子函数，那么使用 React.Component的方式应该也是可以的。 

　　但是在实际使用过程中还是遇到了问题，没有成功。 可以取代他的方法是使用 e.preventDefault() 来阻止默认。

　　如下所示：

传递：

&lt;Link to={{ pathname: '/log', query: { type: 'login' } }} &gt;登录&lt;/Link&gt;

 获取：

if ( this.props.location.query.type == 'login') {

this.setState({ifUp: true});

}