路由的监听和withRouter

路由的监听和withRouter

每一个使用了路由的组件都会被Route包裹起来，每个被Route包裹的组件都会多出几个对象，通过this.props查看，所以当我们使用生命周期钩子函数中的 componentWillMount()函数或者 componentDidUpdate()函数都可以监听到路由的变化

路由改变，组件的 this.props.location 中的 pathname 就会改变，props一改变，就会触发哪两个生命周期钩子函数，所以我们可以靠这个监听

组件内监听

    
import React,{Component} from 'react';
import { NavLink,Route } from 'react-router-dom'


class Shop extends Component{

componentWillUpdate () {
    console.log('luyou gaibian ')
 }
 //或者
 componentDidUpdate () {
    console.log( ' 触发了钩子 ' )
 }
render () {
    return (
        <div>
        // 当点击这个两个链接的时候 this.props.location的pathname就会改变，就会触发钩子函数
            <NavLink to = "/shop"> a </NavLink>
            <NavLink to = "/shop"> b </NavLink>
        </div>
        )
    }
}
export default Shop

全局监听

看图我们可以发现 App组件并没有包裹在组件中，而是包裹在中（因为我们一开始的时候就在入口文件中使用Router将App包裹住了），所以App组件中并没有 this,props.location对象，但是我们又不可能改变他，所以我们需要把它变成伪,这时候就需要一个组件: withrouter

    //这是App组件的代码
   import { withRouter } from ' react-router-dom '
   
   
   class App extends React.Component{
        
        componentWillMount () {
            console.log( ' 全局钩子触发 ' )
        }
            
        //h或者
        componentDidUpdate () {
            console.log( ' 全局钩子触发了 ' )
        }
            
        render () {
            return (
                " 一万行代码 "
            )
        }
   }
   
   
   //使用witRouter将App包裹起来
   export default withRouter( App )