react-route路由监听

react-route v3
项目中写了一个自动生产文档的系统， 其中有一个比较烦人的需求，就是项目中的面包屑是根据
Router组件自动生成的，它里面是根基Router组件的配置层级自动生产， 比如A -> B -> C 那么
Router先匹配A 然后 B 然后C， 目前有个需求是，C下面有两个子组件，他们是switch关系，即只能是其中一个， 这两个子组件一个是文档的列表，一个是文档的详情，项目要求在文档的详情页面通过点击面包屑应该返回到文档列表页码，
怎么办?
初步想法是 使用react-router的 onEnter onLeave 等生命钩子
查看文档 onEner onLeave
react-router route组件
onLeave 函数的 route 组件的函数 , 注意是 route组件的函数， 并不是route组件对应的component组件的函数(即我们自己写的组件)， 相当于在外面嵌套了一层，所以你直接在使用组件写的route组件中使用这个函数是没有用的

class R extends React.Component {
  onLeave(){}  //  无效的 onLeave是route组件的钩子函数
}


   
 

所以首先明白钩子是输入谁的。
问题又来了
onLeave 里面并没有 replace， 即我不能执行切换路由，而且最重要的是 onLeave里面只有 preState 即
我只能自到我目前在那，并不能知道我将其去哪？咋办
所以，这个函数已经无法使用了

我们可以想到一点是， 既然我们想要使用replace这样的函数，而且又能知道我们处于哪个位置，那么是
不是直接在组件生命周期里面使用会不会更加方便一点？
于是

class R1 extends React.Component {
}

class R2 extends React.Component {
  componentWillUnmount() {
     this.props.router.push('xxxx');  // 当R组件离开的时候 切换路由
  }
}


   
  
  
 

问题来了，面包屑上一级是 C ，返回C 就会直接导入R1, 而我们想要的是 从R2 已经导入到其他我们想要
的路由，就我们上面想的，在R2 的 componentWillUnmount 这里监听，当R2变化的时候，直接导向其他的路由，是不少符合我们的需求了，还是太天真了
并不行，因为 onEnter 先发生 然后 R2的componentWIllLeave 才发生， 其实是这样的，onEnter其实在
history这里监听， 当点击 link的时候 先触发 history的 location 链接修改，然后这个链接一旦修改，马上触发 onEnter发送，后面才是组件发送改变。所以这个方法也被否定了。
有没有既在组件里面写的路由，又在history location 链接改变的时候触发的
当然有 routerWillLeave 这是路由组件将要离开的时候触发的， 而且可以写在我们定义的组件里面

具体用法为:

  componentDidMount(){
   this.props.router.setRouteLeaveHook(
     this.props.route,
     this.routerWillLeave
   )

   routerWillLeave(nextLocation){
     return 'Are you sure you want to leave?';
   }

用法讨论
上面那个方法恰好符合我的要求， 而且， 它实在history层面监听的，所以发送在C的onEnter之前。

于是我在里面使用为

    componentDidMount(){
      this.props.router.setRouteLeaveHook(
        this.props.route,
        this.routerWillLeave
      )
    }

    routerWillLeave = (nextLocation) => {
        this.props.router.replace("....path");
    }

结果还是有问题了，无限循环， 怪不得 onLeave不提供 replace 这些函数，原来如此，因为routeWllLeave 是不断的调用的，因为当前组件还没离开，然后有 replace 然后又执行routeWillLeave
当然， 解决这个很简单， 配加个判断就行了

    componentDidMount(){
      this.props.router.setRouteLeaveHook(
        this.props.route,
        this.routerWillLeave
      )
    }

    routerWillLeave = (nextLocation) => {
        if (nextLocation.pathname === "targetPath) {
          this.props.router.replace("....path");
        }
    }

解决了！