title: Back button is not working when using history.pushState() in ReactJs
body: <p>Currently, I am working on a ReactJs project where I've created infinite scrolling on the basis of scrolling events. My client wanted to have URL changing while scrolling up and down.</p>
  
  <p>For achieving this functionality I've used history.pushState() which updating URL like:- /#/page/1...2...3 up to n. </p>
  
  <p>But the problem is when I am clicking back button from the browser, it is going to the previous state rather than the previous page (as the nature of history.pushState()).</p>
  
  <p>I would appreciate if anyone helps me out to sort it out.</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>Here is my code</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import ComponentView from './view';
  import axios from 'axios';
  import { connect } from 'react-redux';
  import { HashLink as Link } from 'react-router-hash-link';
  import { createAction,ActionNames } from '../../redux/actions/index';
  import createHistory from "history/createBrowserHistory";
  import { BrowserRouter } from 'react-router-dom';
  /**
   * @name Product Grid Component
   * @type Component
   * @author Inderdeep Singh
   */
  class Main extends Component {
  
      /**
       * Constructor
       * @param props
       */
      state = {
          items: [],
          isLoading: true,
          cursor: 0
      }
  
      constructor(props){
          super(props);
          this.pageSize = 10;
          this.state = {
              data:[],
              link:'',
              loading:true,
              items: [],
              isLoading: false,
              loadAll:false,
              cursor: 0,
              arrSize: 12,
              productsLen:0,
              section:0,
              scrollUp:0,
              url:'',
              sectionSize:'',
              sectionSizeLim:1
          }
  
          this.handleOnScroll = this.handleOnScroll.bind(this);
  
      }
  
      componentWillUnmount() {
          window.removeEventListener('scroll', this.handleOnScroll);
  
  
      }
  
      clickBackButton(){
          const history = createHistory();
                  var myarray = [];
                  var url = history.location;
                  myarray.push(url);
  
  
          $(window).on('popstate', function() {
              var hashLocation = location.hash;
  
              var hashSplit = hashLocation.split("/");
  
              var hashName = hashSplit[1];
  
  
  
              if (hashName !== '') {
                var hash = window.location.hash;
  
                if (hash === '') {
  
                  var number= url.hash;
                  number= number.split('/');
                  this.console.log("nagesh "+number[2]);
  
                }
              }
            });
      }
  
  
      /**
       * Component Did Mount
       */
      componentDidUpdate(props){  
          this.clickBackButton();
  
      }
  
  
      componentDidMount(){
          var url = window.location.href;
          this.setState({url:url})
              if(url.indexOf('#')&gt;-1){
                  if(url.indexOf('kategori')&gt;-1){
                      url = url.split('/');
                      var pageNum = url[6];
                      var catName = url[4];
                      var timesRun = 0;
                      var Scrolling = setInterval(function () {
                          timesRun += 1;
                          if(timesRun &lt;= pageNum){
                              window.scrollTo(0, pageNum * 1930);
                              var fact ='/kategori/'+catName+'/#/page/'+timesRun;
                              history.pushState(null,null,fact);
                          }
                          else{
                              clearInterval(Scrolling)
                          }
                      },1000);
                  }
                  else if(url.indexOf('produkt')&gt;-1){
                      url = url.split('/');
                      var pageNum = url[6];
                      var catName = url[4];
                      var timesRun = 0;
                      var Scrolling = setInterval(function () {
                          timesRun += 1;
                          if(timesRun &lt;= pageNum){
                              window.scrollTo(0, pageNum * 1930);
                              var fact ='/produkt/'+catName+'/#/page/'+timesRun;
                              history.pushState(null,null,fact);
                          }
                          else{
                              clearInterval(Scrolling)
                          }
                      },1000);
                  }
                  else{
                      url = url.split('#');
                      url = url[1].split('/');
                      url = url[2];
                      var timesRun = 0;
                      var Scrolling = setInterval(function () {
                          timesRun += 1;
                          if(timesRun &lt;= url){
                              window.scrollTo(0, url * 1930);
                              history.pushState(null,null,'/#/page/'+timesRun);
                          }
                          else{
                              clearInterval(Scrolling)
                          }
                      },1000);
  
                  }
  
                  }
  
          const {emitter} = this.props;
          emitter.addListener("REFRESH_PRODUCTS",(query)=&gt;{               
              this.getProducts(1,query)
          })
          this.setState({data:this.props.data})
  
          window.addEventListener('scroll', this.handleOnScroll);
          this.doQuery();
  
  
      }
      componentWillReceiveProps(newProps){
          if(JSON.stringify(this.props.query)!=JSON.stringify(newProps.query)){
              this.getProducts(1,newProps.query)
          }
  
  
  
      }
  
      doQuery = () =&gt; {
          this.setState({ isLoading: true, error: undefined })
          axios.post('/getProducts')
              .then((res) =&gt; {
  
                  this.setState({
  
                      productsLen:res.data.results.length,
                      sectionSize:parseInt(res.data.results.length/12)
                  });
              })
      }
      handleOnScroll() {
          var self = this;
  function callURL(ss){
  
      var url = window.location.href;
          setTimeout(
              self.setState({
                  arrSize: self.state.arrSize + 12,
                  isLoading: true
              }), 3000);
          var url = window.location.href;
          if(self.state.sectionSizeLim&lt;=self.state.sectionSize){
              self.setState({
                  sectionSizeLim: self.state.sectionSizeLim + 1,
              })
          }
          if (self.state.arrSize &lt;= self.props.product_list.length) {
              var sect = self.state.section;
              if (url.indexOf('#') &gt; -1) {
                  url = url.split('#');
                  url = url[1].split('/');
                  url = url[2];
                  if (sect &lt;= url) {
                      sect = sect + 1;
                  }
              }
              else {
                  sect = sect + 1;
              }
              self.setState({
                  isLoading: true,
                  section: sect
              })
          }
          else {
              self.setState({
                  isLoading: false,
                  loadAll: true
              })
          }
          if(ss==0){
              if (self.state.url.indexOf('kategori') &gt; -1) {
                  var url = self.state.url.split('/');
                  var fact = '/kategori/' + url[4] ;
                  // history.pushState(null, null, fact);
                  // window.location.hash = fact;
                  // window.location.hash = '';
                  // window.location.href.split('#')[0];
                  window.history.pushState("object or string", "Title", fact,"/");
              }
              else if (self.state.url.indexOf('produkt') &gt; -1) {
                  var url = self.state.url.split('/');
                  var fact = '/produkt/' + url[4] ;
                  // history.pushState(null, null, fact);
                  // window.location.hash = fact;
                  // window.location.hash = '';
                  // window.location.href.split('#')[0];
                  window.history.pushState("object or string", "Title", fact,"/");
              }
              else {
                  // history.pushState(null, null, '/');
                  // window.location.hash = '';
                  window.history.pushState("object or string", "Title", "/");
              }   
          }
          else{
              if (self.state.url.indexOf('kategori') &gt; -1) {
                  var url = self.state.url.split('/');
                  var fact = '/kategori/' + url[4] + '/page/' + ss;
                  // history.pushState(null, null, fact);
                  // window.location.hash = fact;
                  window.location.hash = '/page/' + ss;
  
              }
              else if (self.state.url.indexOf('produkt') &gt; -1) {
                  var url = self.state.url.split('/');
                  var fact = '/produkt/' + url[4] + '/page/' + ss;
                  // history.pushState(null, null, fact);
                  // window.location.hash = fact;
                  window.location.hash = '/page/' + ss;
  
              }
              else {
                  // history.pushState(null, null, '/#/page/' + ss);
                  window.location.hash = '/page/' + ss;
  
              }
          }
  }
          var h = ($("html").scrollTop());
          if(h == 0 ){
              callURL(0);
          }
          else if(h &gt;= 1500 &amp;&amp; h &lt;= 1930){
              callURL(0); 
          }
          else if (h &gt;= 1930 &amp;&amp; h &lt;= 3860) {
              callURL(1)
          }
          else if (h &gt;= 3860 &amp;&amp; h &lt;= 5790) {
              callURL(2)
          }
          else if (h &gt;= 5790 &amp;&amp; h &lt;= 7720) {
              callURL(3)
          }
          else if (h &gt;= 7720 &amp;&amp; h &lt;= 9650) {
              callURL(4)
          }
          else if (h &gt;= 9650 &amp;&amp; h &lt;= 11580) {
              callURL(5)
          }
          else if (h &gt;= 11580 &amp;&amp; h &lt;= 13510) {
              callURL(6)
          }
          else if (h &gt;= 13510 &amp;&amp; h &lt;= 15440) {
              callURL(7)
          }
          else if (h &gt;= 15440 &amp;&amp; h &lt;= 17370) {
              callURL(8)
          }
          else if (h &gt;= 17370 &amp;&amp; h &lt;= 19300) {
              callURL(9)
          }
          else if (h &gt;= 19300 &amp;&amp; h &lt;= 21230) {
              callURL(10)
          }
          else if (h &gt;= 21230 &amp;&amp; h &lt;= 23160) {
              callURL(11)
          }
          else if (h &gt;= 23160 &amp;&amp; h &lt;= 25090) {
              callURL(12)
          }
          else if (h &gt;= 25090 &amp;&amp; h &lt;= 27020) {
              callURL(13)
          }
          else if (h &gt;= 27020 &amp;&amp; h &lt;= 28950) {
              callURL(14)
          }
          else if (h &gt;= 28950 &amp;&amp; h &lt;= 30880) {
              callURL(15)
          }
          else if (h &gt;= 30880 &amp;&amp; h &lt;= 32810) {
              callURL(16)
          }
          else if (h &gt;= 32810 &amp;&amp; h &lt;= 34740) {
              callURL(17)
          }
          else if (h &gt;= 34740 &amp;&amp; h &lt;= 36670) {
              callURL(18)
          }
          else if (h &gt;= 36670 &amp;&amp; h &lt;= 38600) {
              callURL(19)
          }
          else if (h &gt;= 38600 &amp;&amp; h &lt;= 40530) {
              callURL(20)
          }
          else if (h &gt;= 40530 &amp;&amp; h &lt;= 42460) {
              callURL(21)
          }
          else if (h &gt;= 42460 &amp;&amp; h &lt;= 44390) {
              callURL(22)
          }
          else if (h &gt;= 44390 &amp;&amp; h &lt;= 46320) {
              callURL(23)
          }
          else if (h &gt;= 46320 &amp;&amp; h &lt;= 48250) {
              callURL(24)
          }
          else if (h &gt;= 48250 &amp;&amp; h &lt;= 50180) {
              callURL(25)
          }
          else if (h &gt;= 50180 &amp;&amp; h &lt;= 52110) {
              callURL(26)
          }
          else if (h &gt;= 52110 &amp;&amp; h &lt;= 54040) {
              callURL(27)
          }
          else if (h &gt;= 54040 &amp;&amp; h &lt;= 55970) {
              callURL(28)
          }
          else if (h &gt;= 55970 &amp;&amp; h &lt;= 57900) {
              callURL(29)
          }
          else if (h &gt;= 57900 &amp;&amp; h &lt;= 59830) {
              callURL(30)
          }
          else if (h &gt;= 59830 &amp;&amp; h &lt;= 61760) {
              callURL(31)
          }
          else{
          console.log(h);
          }
  
  
          var scrollTop = (document.documentElement &amp;&amp; document.documentElement.scrollTop) || document.body.scrollTop;
          var scrollHeight = (document.documentElement &amp;&amp; document.documentElement.scrollHeight) || document.body.scrollHeight;
          var scrollHeights = (document.documentElement &amp;&amp; document.documentElement.scrollHeight) || document.body.scrollHeight;
          scrollHeight = scrollHeight - 1000;
          var clientHeight = document.documentElement.clientHeight || window.innerHeight;
          var scrolledToBottom = Math.ceil(scrollTop + clientHeight) &gt;= scrollHeight;
          var scrollToTop = Math.ceil(scrollTop - clientHeight) &gt;= scrollHeight;
  
      }
      /**
       * Get products
       * @param page
       */
      getProducts(page,customQuery){
          page = page || 1;
          // console.log(page);
          const {getProducts,query} = this.props;
          let obj = {
              ...query,
              ...customQuery,
              query : {
                  ...(query || {}).query,
                  ...(customQuery || {}).query
              },
  
              limit : 5000,
  
              skip : 0
          };
          obj.query = {
              ...obj.query,
              state : 'published'
          }
  
      }
  
      /**
       * Render the view
       * @returns {*}
       */
      render() {
          return (ComponentView.bind(this))();
      }
  }
  
  
  function bindAction(dispatch) {
      return {
          getProducts : (data)=&gt;{
              return dispatch(createAction(ActionNames.GET_PRODUCTS,data));
          }
      };
  }
  
  /**
   * Map the shared state to properties
   * @param state
   * @returns Object
   */
  const mapStateToProps = state =&gt; {
      // console.log(state)
      return {
          data: state.products.results || [],
          count : state.products.count,
          hasMore : state.products.hasMore,
          emitter : state.emitter
      };
  };
  
  
  Main.displayName = 'Product Grid';
  
  export default connect(mapStateToProps,bindAction)(Main);
  </code></pre>