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组件进入或离开时所触发的事件;