前端路由
在web应用开发中，路由系统是不可或缺的一部分。路由简单来说就是当url发生变化时，web界面也会随之改变。主流的前端框架都有自己的路由实现，而React也不例外，React-router就是facebook官方维护的路由系统
基本用法
//首先定义基本的组件
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,hashHistory} from 'react-router';
class App extends React.Component{
render(){
return (
<div>
<h3>首页</h3>
{this.props.children}
</div>
)
}
}
//将Router作为React的一个组件
ReactDOM.render(
(
<Router history={hashHistory}>
<Route path="/" component={App}/>
</Router>
),document.getElementById('app')
);
在这个例子中，从react-router包导入了Router、Route、hashHistory模块。其中Router仅仅是路由组件的容器，history属性决定了路由的实现类型，而真正的路由需要使用Route来定义。
Route两个基本属性，path和component，显而易见path指的是路由地址，而component则表示访问该地址将要显示的组件。
运行上面这个例子，浏览器输入localhost:8080，地址将会变成http://localhost:8080/#/XXX=XXXXX这种形式，因为我们将history属性设置为hashHistory,表示使用hash的形式来切换路由，所以url地址将会是以上这样。
history属性一共有三个值，分别为hashHistory、browserHistory、createMemoryHistory。其中hashHistory兼容性最好，browserHistory需要对服务器进行改造，否则用户直接向服务器请求某个子路由，会显示网页找不到的404错误,而createMemoryHistory主要用于服务器端渲染，不与浏览器互动。
嵌套与匹配规则
嵌套
路由就是组件，所以可以像React组件一样进行嵌套
//增加几个组件
...省略部分代码
class Repos extends React.Component{
render(){
return (
<div>
<h3>keke</h3>
</div>
)
}
}
class About extends React.Component{
render(){
return(
<div>
<h3>haha</h3>
</div>
)
}
}
ReactDOM.render(
(
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>
</Router>
),document.getElementById('app')
);
这时访问/repos将会显示Repos组件，同样访问/about将会显示About组件，如果有更多组件，可以继续深层次的进行嵌套
path属性
路由组件的path指定路由的匹配规则,在父子嵌套关系下，父级路由的这个属性也可以省略
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
//当用户访问/inbox/messages/:id时，会加载Inbox以及Message组件
//如果省略父级的path属性，可以写成这样
<Route component={Inbox}>
<Route path="inbox/messages/:id" component={Message} />
</Route>
//访问/inbox/messages/:id时，依然会加载嵌套的两个组件
path属性通配符
path属性也可以使用通配符
<Route path="/hello/:name">
// 匹配 /hello/michael
// 匹配 /hello/ryan
<Route path="/hello(/:name)">
// 匹配 /hello
// 匹配 /hello/michael
// 匹配 /hello/ryan
<Route path="/files/*.*">
// 匹配 /files/hello.jpg
// 匹配 /files/hello.html
<Route path="/files/*">
// 匹配 /files/
// 匹配 /files/a
// 匹配 /files/a/b
<Route path="/**/*.jpg">
// 匹配 /files/hello.jpg
// 匹配 /files/path/to/file.jpg
:paramName匹配URL的一个部分，直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName取出
()()表示URL的这个部分是可选的
*匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式
**匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式
<Route path="/comments" ... />
<Route path="/comments" ... />
//相同路径匹配两个或多个规则时，只有第一个会生效
<Router>
<Route path="/:userName/:id" component={UserPage}/>
<Route path="/about/me" component={About}/>
</Router>
//这里访问/about/me时并不会触发第二个规则，因为它会首先匹配/:userName/:id
其他组件
React-router还提供了一些功能性组件，使用时需要导入模块
import {Router,Route,Link,hashHistory,IndexRoute,Redirect,IndexRedirect,IndexLink,browserHistory} from 'react-router';
IndexRoute组件
表示当访问根路径/时，如果没有匹配任何子组件，将要显示的一个默认组件（类似于组件的index.html）
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
</Route>
</Router>
这里访问根路径 /将会显示默认子组件Home
Redirect 组件
用于定义路由的重定向，使用户访问一个路由时，自动跳转到另一个路由
...省略部分代码
<Redirect from="/repos" to="/repos/form"/>
现在访问/repos时，会自动跳转到/repos/form
IndexRedirect 组件
专门用于定义根路径的重定向，用法与Redirect类似
<IndexRedirect to="/welcome"/>
Link组件
相当于React版的a标签
<Link to="/about/contact">about！</Link>
//点击后将跳转到/about/contact路由
IndexLink组件
也是专门用于链接根路径的Link组件
<IndexLink className="btn btn-default" to="/">返回首页</IndexLink>
//点击后将跳转到根路径
以上
