react的路由监听

在react中，所有的路由组件props身上都会有三个属性，而这三个属性记录了路径的变化情况，路径变化，属性就会变化，属性变化，就会触发componentWillReciveProps这个钩子，我们可以利用这个钩子做一些处理，而要监听路由的变化，就要监听整个项目的路由，所以我们要找到最大的组件 最大的组件是app，但是他是函数式组件，我们不能动他，所以我们要找到除了app以下的我们自己定义的最大的组件(17版本 static getDerivedStateFromProps)，

假如我们最大的组件是layout组件 ，当我们找到layout的时候，发现layout组件内的props并没有location,history等属性，layout不是路由组件，（路由组件：由Route组件处理的才是路由组件）那么我们应该如何解决呢，（注意，如果是想单个监听，就找单个路由监听就可以了）
所以我们需要讲layout组件转变成路由组件，这里我们就要找到高阶组件了(withRoute)，react-route-dom提供的

withRoute 的用法:他是一个函数，接受一个组件作为参数

用法：

import {withRoute}  from 'react-route-dom'


export default withRoute(lLayout)  //Layout是除了app的最大的组件

此时，就可以在layout的props属性，可以看到history等属性，此时，layout就是伪路由组件

在layout的组件内

这里是全局的路由监听，单个的路由监听，在单个组件内些jiu

componentWillReceiveProps(nextprops){
    console.log('路由改变了')
}

demo：加入现在我们有一个业务要求：当我们点击到其中的一个页面时，footer消失，头部内容变化，对于footer的消失，就必须用数据去控制 。

所以们要定义一个数据在constructor里面

   constructor(props) {
        super(props)  
        this.state = {
           backFlag:false,
           footerFalg:true,
        }
    }

    
    render() {

        **const {backFlag,footerFlag} =this.state//将数据结构出来**⭐
        
        return (
        ）
  }      

 { footerFlag && <FooterComp></FooterComp>}//数据控制footer组件的存在与否