title: react router v4 history.push() doesn't work when the url changed
body: <p>I'm using react-router v4,and I can get "this.props.history".However,"this.props.history.push("/Anli/"+page) " (in the Anli.js,funtion changePage() )doesn't work  when the url in the address bar of the browser has changed.</p>
  
  <p>But “ this.prop.history.push("/home")  ” worked.
  I don't know why.</p>
  
  <p>Thanks for help.</p>
  
  <p>index.js</p>
  
  <pre><code>import { BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';
  import React from 'react';
  import Anli from '../views/anli/Anli';
  
  class RouterIndex extends React.Component{
      render(){
          return(
              &lt;Router&gt;
                  &lt;Switch&gt;
                  &lt;Route path="/home" exact component={Home}&gt;&lt;/Route&gt;
  
                      &lt;Route path="/AnLi/:page" render={props =&gt; &lt;Anli {...props}/&gt;}&gt;&lt;/Route&gt;
                      &lt;Redirect from="/*" to="/home" /&gt;
                  &lt;/Switch&gt;
              &lt;/Router&gt;
          );
      }
  }
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import 'antd/dist/antd.css';
  import { createStore } from 'redux'
  import { Provider } from "react-redux";
  import RouterIndex from './router';
  import reducer from './reducer/reducer';
  
  const store = createStore(reducer);
  
  class App extends Component {
    render() {
      return (
        &lt;Provider store={store}&gt;
          &lt;RouterIndex/&gt;
        &lt;/Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>Anli.js</p>
  
  <pre><code>import React from 'react'
  import TopNavbar from '../../components/navbar/TopNavbar';
  import SuspendBar from '../../components/suspendBar/SuspendBar';
  import ajaxhost from '../../ajaxhost';
  import SubCards from '../../components/subPageCard/SubCards';
  import {Pagination} from "antd";
  import { withRouter,Link } from "react-router-dom";
  import "./anli.css"
  import Footer_ from '../../components/footer/Footer_';
  
  
  
  class Anli extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        datas: [],
        pages:{}
      }
      this.changePage = this.changePage.bind(this);
    }
  
    componentDidMount() {
      let page = this.props.match.params.page;
      let url_;
      if (page === 1) {
        url_ = this.state.url
      }else{
        url_ = this.state.url + suffix + page
      }
      let url = encodeURIComponent(url_).replace(new RegExp("%", "g"), '~');
      let that = this;
      fetch(ajaxhost +'/search/hunlicehua/'+ url, {
        method: 'GET'
      }).then((res) =&gt; {
        if (res.ok) {
          res.json().then(function (result) {
            debug &amp;&amp; console.log(result);
            that.setState({
              datas:result.datas,
              pages:result.pages
            })
          })
        }
      }).catch((res) =&gt; {
        console.log(res);
      })
    }
  
    changePage(page){
  
      console.log(this.props.history);
      this.props.history.push("/AnLi/"+ page);
  
    }
    render() {
      const {datas,pages} = this.state;
  
      const current = parseInt(this.props.match.params.page);
      const total = parseInt(pages.list[pages.list.length - 1].num);
      return (
        &lt;div history={this.props.history}&gt;
         &lt;TopNavbar/&gt;
         &lt;SuspendBar/&gt;
  
         &lt;SubCards datas={datas}/&gt;
         &lt;div className="pagination-custom" &gt;
            &lt;Pagination defaultCurrent={current} total={total} onChange={this.changePage}/&gt;
         &lt;/div&gt;
  
        &lt;Footer_ /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>