react-router

• 使用时，路由器就是React的一个组件

import{Router}from'react-router';
render(
<Router/>,document.getElementById('app');
)

• Router组件本身只是一个容器，真正的路由要通过Route组件定义

import{Router,Route,hashHistory}from'react-router';
render((
<Routerhistory={hashHistory}>
<Routepath="/"component={App}/>
</Router>
),document.getElementById('app'));

Router组件有一个参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定，即URL的#部分发生变化，举例来说，用户访问http://www.example.com,实际会看到的是http：//www.example.com/#/
Route组件定义了URL路径与组件的对应关系。你可以同时使用多个Route组件

<Routerhistory={hashHistory}>
<Routepath="/"component={App}/>
<Routepath="/repos"component={Repos}/>
<Routepath="/about"component={About}/>
</Router>

• Route组件还可以嵌套

<Routerhistory={hashHistory}>
<Routepath="/"component={APp}/>
<Routepath="/about"component={About}/>
</Route>
</Router>

• App组件要写成下面的样子

exportdefaultReact.createClass({
render(){
return<div>
{this.props.children}
</div>
}
})
//this.props.children属性就是自组件

子路由也可以不写在Router组件里面，单独传入Router组件的routes属性

letroutes=<Routepath="/"component={App}>
<Routepath="/repos"component={Repos}/>
<Routepath="/about"component={About}/>
</Route>
<Routerroutes={routes}history={browserHistory}/>

• path属性：
  Route组件的path属性指定路由的匹配规则，这个属性是可以省略的，这样的话，不管路径是否匹配，总是会加载指定组件

<Routepath"inbox"component={Inbox}>
<Routepath="/messages/:id"component={Message}/>
</Route>

• 通配符
  
  规则如下：
• :parsename匹配URL的一个部分，直到遇到下一个 /、？、#为止。这个路径参数可以通过this.props.parms.paramname取出
  （）：表示url的这个部分是可选的
• ：匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式
• ** 匹配任意字符，直到下一个/、？、#为止。匹配方式是贪婪模式
  path属性也可以使用相对路径（不以/开头），匹配时就会相对于父组件的路径
• 路由匹配规则时从上倒下执行，一旦发现匹配，就不再匹配其余的规则了

<Router>
<Routepath="/:Username/:id"component={UserPage}/>
<Routepath="/about/me"component={About}/>
</Router>

7. IndexRoute组件

<Router>
<Routepath="/"component={App}>
<IndexRoutecompoent={Home}/>
<Routepath="accounts"component={Accounts}/>
<Routepath="statements"component={Statements}/>
</Route>
</Router>

用户访问/的时候，加载的组件结构如下

<App>
  <Home/>
</App>