在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组件的存在与否