react-router之onEnter和onLeave
在之前介绍过react-router的使用，在这里我们介绍一下路由的onEnter和onLeave，顾名思义，分别是路由进入之前和路由离开之前，我们可以在这段时间内做一些处理。比如下面这个例子
<Route path="/home" component={App} onEnter={(nexState,replace)=>{
if(nexState.location.pathname!=='/'){
var sid = UtilsMoudle.getSidFromUrl(nexState);
if(!sid){
replace("/")
}else{
console.log(sid);
}
}
}}>
</Route>上述代码是onEnter的一个简单应用，从上面的示例可以看出nextState参数为即将跳转的url地址，replace可以替换掉原来的地址。上述代码中，如果要跳转的url地址中可以获取参数sid，则打印出来，然后跳转，如果没有则直接跳转到根目录。 这是一个很好的方法，但是有一个缺点，如果我在代码处理中是采用异步的方式来请求数据，然后判断完成以后再进行跳转，就会出现问题，这时就用到onEnter的第三个参数：callback。
<Route path="/home" component={App} onEnter={(nexState,replace,cb)=>{
if(nexState.location.pathname!=='/'){
UtilsMoudle.getSidFromUrl(nexState,sid=>{
if(!sid){
replace("/")
}else{
console.log(sid);
}
cb();
});
}else{
cb();
}
}}>
</Route>我们修改了一下之前的代码，加入第三个参数cb，当有这个参数时，如果不执行cb函数，则不会跳转，有了这个就很方便了，我们只需要在异步回调函数中调用即可。 对于onLeave的使用和onEnter相似，在此就不在赘述。其功效为即将离开此url之前触发，假设有A，B两个url，在A的url上有onLeave，在B上有onEnter，则离开A时先触发A的onLeave函数，然后触发B的onEnter函数。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-09-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读