javascript - React-router中的this.props.history.push，url发生了变化，但是页面没有变化

react-router是v4版本，代码如下

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect, withRouter } from 'react-router-dom';
import './index.less';
import Work from './index/work';
import Info from './index/info';

class Index extends Component {
    constructor(props) {
        super(props);
    }

    handleRouterPush(path, e) {
        this.props.history.push(path);
    }

    render() {
        return (
            <p>
                <Router>
                    <p>
                        <Switch>
                            <Route exact path="/index">
                                <Redirect from="/index" to="/index/work" />
                            </Route>
                            <Route path="/index/work" component={ Work } />
                            <Route path="/index/info" component={ Info } />
                        </Switch>
                        <p className="index-bottom">
                            <p onClick={ this.handleRouterPush.bind(this, '/index/work') }>
                                <p className="index-bottom-icon">
                                    <span>工作</span>
                                </p>
                            </p>
                            <p onClick={ this.handleRouterPush.bind(this, '/index/info') }>
                                <p className="index-bottom-icon">
                                    <span>个人</span>
                                </p>
                            </p>
                        </p>
                    </p>
                </Router>
            </p>
        );
    }
}

export default withRouter(Index);

若是改成使用Link跳转则是可以的，但是this.props.history.push就不行了，请问这是为什么？