React中的Router

React-Router：在react中，路由可以作为一个塑件存在，只要配置合适的属性参数，渲染到页面，就可以起到路由的作用。

Router组件是一个路由容器，里面可以包含多种类型的路由组件：Route组件，IndexRoute组件，Redirect组件，IndexRedirect组件，Link组件，IndexLink组件；

一）Router组件：主要用来作为路由组件的容器（根节点）；

属性：

routes属性：表示Router容器中的路由组件；

history属性：存在与Router组价中，主要用来监视url的变化；它的属性值有：

1）hashHistory：用来识别url中的hash部分（#）；

2）browserHistory：识别整个url；

3）createMenoryHistory：主要用于服务器渲染用；

eg：

   <Router history={hashHistory}> </Router>

二）Route组件：

定义：表示url路径与要加载组件之间的关系；

component属性：要加载的组件；

path属性：识配url地址，（不标出，表示人饿时候都要加载组件）

1）/:param：识配url中的一部分，遇到下一个“/”，“?”，“#”就结束；

2）（url）：表示url为可选部分；

3）*：识配url中任意部分；

注意：

1）多个路由组件，其中一个识配，则剩余不在适配；

2）/:param可由this.props.params.paramName获取；

3）查询字符串可由this.props.location.query.bar获取；

eg：<Route path="/:id" component={app}/>

路由嵌套问题：

<Router history={hashHistory}>

   <Route path="/" component={A}>

       <Route path="name" component={B}/>

   </Route>

</Router>

表示访问url为/name时，渲染的组件为：

<A><B></A>

三），IndexRoute组件：

定义：显示指定访问根路由时默认加载的子组件；

注：IndexRoute组件没有path属性；

eg：

<Route path="/" component={A}>

    <IndexRoute component={B}/>

</Route>

访问根节点时加载的组件为：<A><B></A>

四）Redirect组件：

定义：该组件用于路由跳转，用户访问指定路由，则跳转到另一个路由；

eg:

<Redirect from="/name" to="/one" />

五）IndexRedirect组件：

定义：访问根路由时，将路由重定向到另一个路由；

<IndexRedirect to="/one" />

六）Link组件：

定义：<a>的react版本，可带有一个链接，一点击就跳转到另一个路由；

to属性：链接；

activeStyle属性：设置点击后link组件样式；

activeClassName属性：同上；

eg：

<Link to="/one" activeStyle={{color:red}} /> or <Link to="/one" activeClassName="active"/>

七）IndexLink组件：

定义：若链接点击后跳转到根路由，则应用该组件而不是link组件；

八）

Enter和Leave钩子：是Route组件进入或离开时所触发的事件；