监听路由变化是一个非常实用的功能，特别是一个page里多种类型查询

版本

"react": "^16.2.0",
"react-router-dom": "^4.2.2"

方法一

组件渲染完成之后监听路由变化

import React, { Component } from 'react'

class User extends Component {
    constructor (props) {
        super(props)
        this.state = {
            'framework': 'React'
        }
    }

    componentDidMount () {
        // 监听路由变化
        this.props.history.listen(route => {
            console.log(route);
        })
    }

    refreshRoute = () => {
        this.props.history.push(`/user/2222?t=${Date.now()}`)
    }

    render () {
        return (
            <section>
                <button onClick={this.refreshRoute}>button</button>
            </section>
        );
    }
}

export default User;

打印路由信息

方法二

组件重新渲染之前

import React, { Component } from 'react'

class User extends Component {
    constructor (props) {
        super(props)
        this.state = {
            'framework': 'React'
        }
    }
    /*
     * @param {Object} nextProps 即将要进入目标路由对象
     * @param {Object} nextState 即将要进入目标路由状态
     */
    componentWillUpdate (nextProps, nextState) {
        console.log(nextProps);
        console.log(nextState);
    }

    refreshRoute = () => {
        this.props.history.push(`/user/2222?t=${Date.now()}`)
    }

    render () {
        return (
            <section>
                <button onClick={this.refreshRoute}>button</button>
            </section>
        );
    }
}


export default User;

输出

2018-11-15更新说明：componentWillUpdate 生命周期目前已废弃，所以不推荐这种方法了。

方法三

跟第二种方法是一样，只不过重新渲染之后

import React, { Component } from 'react'

class User extends Component {
    constructor (props) {
        super(props)
        this.state = {
            'framework': 'React'
        }
    }
    /*
     * @param {Object} prevProps 当前导航正要离开的路由
     * @param {Object} prevState 当前导航正要离开的状态信息
     */
    componentDidUpdate (prevProps, prevState) {
        console.log(prevProps);
        console.log(prevState);
    }

    refreshRoute = () => {
        this.props.history.push(`/user/2222?t=${Date.now()}`)
    }

    render () {
        return (
            <section>
                <button onClick={this.refreshRoute}>button</button>
            </section>
        );
    }
}

export default User;

使用hooks

注意：React需要16.8.0以上

通过监听 location 是否发生变化从而 update

import React, { useEffect } from 'React';

const App = function (props) {
  
  useEffect(() => {
    console.log(props.location);
  }, [props.location])
}

export default App;