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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值