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 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((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
  </Router>
), document.getElementById('app'));

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

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

<Router history={hashHistory}>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
</Router>

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

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

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

<App>
  <Repos/>
</App>

　　

　　App 组件的写法如下：

export default React.createClass({
  render() {
    return <div>
      {this.props.children}
    </div>
  }
})

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

history相关

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

　　

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

browserHistory
hashHistory
createMemoryHistory

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

render(
  <Router history={browserHistory} routes={routes} />,
  document.getElementById('app')
)

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

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

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

跳转前确认

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

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

　　你可以在 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 Router
import { Router, browserHistory } from 'react-router'
import routes from './app/routes'
render(<Router history={browserHistory} routes={routes}/>, 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});

}