反应历史记录推送父组件

Question

我正在开发React JS应用程序。

我有一个带嵌套子组件的父组件。

我正在使用Route元素，呈现此页面的URL为： https://example.com/random-number/14

class Parent extends React.Component {

    // method to get ID from url and put inside {id} variable
    render() {

        return (
            <div>
                {id}
                <Child number={id}/>
            </div>
        );
    }
}

export default withRouter(Parent);

class Child extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            number: props.number
        };
    }

    handleClick() {
        var randomNumber = myMethodToGetRandomNumber();
        this.setState({
            number: randomNumber
        });
        this.props.history.push('/random-number/' + randomNumber);
    }

    render() {

        return (
            <div>
              { this.state.number }
              <div onClick={handleClick}></div>
            </div>
        );
    }
}

export default withRouter(Child);

因此在此示例中，我第一次加载的页面两次打印数字14。

如果我单击“按钮”，将生成一个新的随机数，网址已更改（例如https://example.com/random-number/18），但仅打印了子组件18。

父组件的值不会从14更改为18。

有没有办法“刷新”父母？