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函数。