官方文档：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 react-router@3.0.1 --save 。 

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

 

 

基本使用方法

　　基本使用方式如下：

import { Router, Route, hashHistory } from 'react-router';render((  
         
        
      
     ), document.getElementById('app'));

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

 

 

 

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

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

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

　　

　　App 组件的写法如下：

export default React.createClass({  render() {    return 
     
            {
    this.props.children}    
     
  }})

 

 

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

 

 

history相关

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

　　

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

browserHistory

hashHistory

createMemoryHistory

 

// JavaScript 模块导入（译者注：ES6 形式）import { browserHistory } from 'react-router'

 

render(  
     ,  document.getElementById('app'))

 

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

 

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

app.get('*', function (request, response){  response.sendFile(path.resolve(__dirname,  '../www/index.html'))})

 

 

 

 

 

 

跳转前确认

　　React Router 提供一个 ，这使得 React 可以拦截正在发生的跳转，或在离开  前提示用户。 返回值有以下两种：

1. return false 取消此次跳转
2. return 返回提示信息，在离开 route 前提示用户进行确认。

　　你可以在  中引入 Lifecycle mixin 来安装这个钩子。

 

 

import { Lifecycle } from 'react-router'const Home = React.createClass({  // 假设 Home 是一个 route 组件，它可能会使用  // Lifecycle mixin 去获得一个 routerWillLeave 方法。  mixins: [ Lifecycle ],  routerWillLeave(nextLocation) {    if (!this.state.isSaved)      return 'Your work is not saved! Are you sure you want to leave?'  },  // ...})

 

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

 

　　

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

 

 

组件外部跳转

　　如下所示：

// your main file that renders a Routerimport { Router, browserHistory } from 'react-router'import routes from './app/routes'render(
     
      , el)
     

　　

　　

// somewhere like a redux/flux action file:import { browserHistory } from 'react-router'browserHistory.push('/some/path')

 

　　

 

传递参数

传递：

<Link to={

{ pathname: '/log', query: { type: 'login' } }} >登录</Link>

 

 获取：

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

this.setState({ifUp: true});

}