title: this.props.history.push not re-rendering react component
body: <p>In my component I use this.props.history.push(pathname:.. search:..) to rerender the component and fetch new data form a third party service. When I first call the page it renders. But when I call history push inside the component the URL updates correctly BUT the component doesn't rerender. I read a lot but couldn't get it working. Any ideas?</p>
  
  <p>I'm using react router v4</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//index.js
  
    &lt;Provider store={store}&gt;
      &lt;BrowserRouter&gt;
        &lt;Switch&gt;
          &lt;Route path="/login" component={Login}/&gt;
          &lt;Route path="/" component={Main}/&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;
  
  
  //Main.js
  //PropsRoute is used to push props to logs component so I can use them when fetching new data
  const PropsRoute = ({ component: Component, ...rest }) =&gt; {
    return (
      &lt;Route {...rest} render={props =&gt; &lt;Component {...props} /&gt;}/&gt;
    );
  };
  
  class Main extends Component {
    render() {
      return (
          &lt;div className="app"&gt;
            &lt;NavigationBar/&gt;
            &lt;div className="app-body"&gt;
              &lt;SideBar/&gt;
              &lt;Switch&gt;
                &lt;PropsRoute path="/logs" component={Log}/&gt; //this component is not rerendering
                &lt;Route path="/reports" component={Reports}/&gt;
                &lt;Route path="/gen" component={Dashboard}/&gt;
                &lt;Redirect from="/" to="/gen"/&gt;
              &lt;/Switch&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      )
    }
  }
  
  export default Main;
  
  
  //inside 'Log' component I call
  import React, {Component} from 'react';
  import {getSystemLogs} from "../api";
  import {Link} from 'react-router-dom';
  import _ from "lodash";
  import queryString from 'query-string';
  
  let _isMounted;
  
  class Log extends Component {
  
    constructor(props) {
      super(props);
  
      //check if query params are defined. If not re render component with query params
      let queryParams = queryString.parse(props.location.search);
      if (!(queryParams.page &amp;&amp; queryParams.type &amp;&amp; queryParams.pageSize &amp;&amp; queryParams.application)) {
        this.props.history.push({
          pathname: '/logs',
          search: `?page=1&amp;pageSize=25&amp;type=3&amp;application=fdce4427fc9b49e0bbde1f9dc090cfb9`
        });
      }
  
      this.state = {
        logs: {},
        pageCount: 0,
        application: [
          {
            name: 'internal',
            id: '...'
          }
        ],
        types: [
          {
            name: 'Info',
            id: 3
          }
        ],
        paginationPage: queryParams.page - 1,
        request: {
          page: queryParams.page === undefined ? 1 : queryParams.page,
          type: queryParams.type === undefined ? 3 : queryParams.type,
          pageSize: queryParams.pageSize === undefined ? 25 : queryParams.pageSize,
          application: queryParams.application === undefined ? 'fdce4427fc9b49e0bbde1f9dc090cfb9' : queryParams.application      
        }
      };
  
      this.onInputChange = this.onInputChange.bind(this);
    }
  
    componentDidMount() {
      _isMounted = true;
      this.getLogs(this.state.request);
    }
  
    componentWillUnmount() {
      _isMounted = false;
    }
  
    getLogs(request) {
      getSystemLogs(request)
        .then((response) =&gt; {
          if (_isMounted) {
            this.setState({
              logs: response.data.Data,
              pageCount: (response.data.TotalCount / this.state.request.pageSize)
            });
          }
        });
    }
  
    applyFilter = () =&gt; {
      //reset page to 1 when filter changes
      console.log('apply filter');
      this.setState({
        request: {
          ...this.state.request,
          page: 1
        }
      }, () =&gt; {
        this.props.history.push({
        pathname: '/logs',
          search: `?page=${this.state.request.page}&amp;pageSize=${this.state.request.pageSize}&amp;type=${this.state.request.type}&amp;application=${this.state.request.application}`
        });
      });
    };
  
    onInputChange = () =&gt; (event) =&gt; {
      const {request} = this.state; //create copy of current object
      request[event.target.name] = event.target.value; //update object
      this.setState({request}); //set object to new object
    };
  
    render() {
      let logs = _.map(this.state.logs, log =&gt; {
        return (
            &lt;div className="bg-white rounded shadow mb-2" key={log.id}&gt;
             ...
            &lt;/div&gt;
        );
      });
  
      return (
        &lt;main className="main"&gt;
          ...
        &lt;/main&gt;
      );
    }
  }
  
  export default Log;</code></pre>
  </div>
  </div>
  </p>