React-Route-v4的一些API(2)

Veröffentlicht am

昨天我们已经讲了RR4最重要的组件，今天我们将接触到一个也很重要的组件，

为你的应用提供声明式，无障碍导航。

to

  • to:string
    作用：跳转到指定路径
    使用场景：如果只是单纯的就直接用字符串形式的路径
    <Link to='/courser' />
  • to:object
    作用：携带参数跳转指定路径
    使用场景：比如你点击的这个链接将要跳转的页面需要展示此链接对应的内容，又比如这是个支付跳转，需要把商品价格等信息传递过去。
    1
    2
    3
    4
    5
    <Link to={{
    	pathname:'/course',
    	search:'?sort=name',
    	state:{price:18}
    }}/>

replace:bool

当replace为true的时候，点击链接后将使用新地址替换掉上一次访问的地址，如果我们一次访问’/one’,’/two’,’/three’,’/four’这四个地址，如果回退，将一次回退至’/three’,’/two’,’/one’，这符合我们的预期，加入我们把链接’/three’中的replace设置为true时，依次点击后再回退，就会依次回退至’/three’,’/one’

这是为导航栏准备的，因为导航需要有’激活状态’

activeClassName:string

导航栏选中激活时应用的样式名，默认为active

1
2
3
4
5
<NavLink
 to='/about'
 activeClassName='selected'>
 MyBlog
</NavLink>

activeStyle:object

可以直接定义激活后的样式

1
2
3
4
5
<NavLink
 to='/about'
 activeStyle={{color:'red',fontWeight:'blod'}}>
 MyBlog
</NavLink>

exact:bool

若为true只有当访问地址严格匹配时激活样式才能应用

strict:bool

若为true，只有当访问地址后缀斜杠严格匹配时（有活无）时激活才能应用。

isActive：func

确定导航是否激活，或是在导航激活时做点别的事情，不管怎样，他不能决定对页面是否可以渲染