欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react-router之onEnter和onLeave

程序员文章站 2022-06-03 21:46:07
...

在之前介绍过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函数。