Javascript 在ReactJs中使用history.pushState（）时，“后退”按钮不起作用

目前，我正在从事一个ReactJs项目，在该项目中，我在滚动事件的基础上创建了无限滚动。我的客户希望在上下滚动时更改URL

为了实现这个功能，我使用了history.pushState（）来更新URL，比如：-/#/page/1…2…3到n

但问题是，当我从浏览器中单击“后退”按钮时，它将进入上一个状态，而不是上一个页面（作为history.pushState（）的性质）

如果有人能帮我解决这个问题，我将不胜感激

提前谢谢

这是我的代码

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('#')>-1){
                if(url.indexOf('kategori')>-1){
                    url = url.split('/');
                    var pageNum = url[6];
                    var catName = url[4];
                    var timesRun = 0;
                    var Scrolling = setInterval(function () {
                        timesRun += 1;
                        if(timesRun <= 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')>-1){
                    url = url.split('/');
                    var pageNum = url[6];
                    var catName = url[4];
                    var timesRun = 0;
                    var Scrolling = setInterval(function () {
                        timesRun += 1;
                        if(timesRun <= 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 <= 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)=>{               
            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 = () => {
        this.setState({ isLoading: true, error: undefined })
        axios.post('/getProducts')
            .then((res) => {

                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<=self.state.sectionSize){
            self.setState({
                sectionSizeLim: self.state.sectionSizeLim + 1,
            })
        }
        if (self.state.arrSize <= self.props.product_list.length) {
            var sect = self.state.section;
            if (url.indexOf('#') > -1) {
                url = url.split('#');
                url = url[1].split('/');
                url = url[2];
                if (sect <= 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') > -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') > -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') > -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') > -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 >= 1500 && h <= 1930){
            callURL(0); 
        }
        else if (h >= 1930 && h <= 3860) {
            callURL(1)
        }
        else if (h >= 3860 && h <= 5790) {
            callURL(2)
        }
        else if (h >= 5790 && h <= 7720) {
            callURL(3)
        }
        else if (h >= 7720 && h <= 9650) {
            callURL(4)
        }
        else if (h >= 9650 && h <= 11580) {
            callURL(5)
        }
        else if (h >= 11580 && h <= 13510) {
            callURL(6)
        }
        else if (h >= 13510 && h <= 15440) {
            callURL(7)
        }
        else if (h >= 15440 && h <= 17370) {
            callURL(8)
        }
        else if (h >= 17370 && h <= 19300) {
            callURL(9)
        }
        else if (h >= 19300 && h <= 21230) {
            callURL(10)
        }
        else if (h >= 21230 && h <= 23160) {
            callURL(11)
        }
        else if (h >= 23160 && h <= 25090) {
            callURL(12)
        }
        else if (h >= 25090 && h <= 27020) {
            callURL(13)
        }
        else if (h >= 27020 && h <= 28950) {
            callURL(14)
        }
        else if (h >= 28950 && h <= 30880) {
            callURL(15)
        }
        else if (h >= 30880 && h <= 32810) {
            callURL(16)
        }
        else if (h >= 32810 && h <= 34740) {
            callURL(17)
        }
        else if (h >= 34740 && h <= 36670) {
            callURL(18)
        }
        else if (h >= 36670 && h <= 38600) {
            callURL(19)
        }
        else if (h >= 38600 && h <= 40530) {
            callURL(20)
        }
        else if (h >= 40530 && h <= 42460) {
            callURL(21)
        }
        else if (h >= 42460 && h <= 44390) {
            callURL(22)
        }
        else if (h >= 44390 && h <= 46320) {
            callURL(23)
        }
        else if (h >= 46320 && h <= 48250) {
            callURL(24)
        }
        else if (h >= 48250 && h <= 50180) {
            callURL(25)
        }
        else if (h >= 50180 && h <= 52110) {
            callURL(26)
        }
        else if (h >= 52110 && h <= 54040) {
            callURL(27)
        }
        else if (h >= 54040 && h <= 55970) {
            callURL(28)
        }
        else if (h >= 55970 && h <= 57900) {
            callURL(29)
        }
        else if (h >= 57900 && h <= 59830) {
            callURL(30)
        }
        else if (h >= 59830 && h <= 61760) {
            callURL(31)
        }
        else{
        console.log(h);
        }


        var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
        var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
        var scrollHeights = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
        scrollHeight = scrollHeight - 1000;
        var clientHeight = document.documentElement.clientHeight || window.innerHeight;
        var scrolledToBottom = Math.ceil(scrollTop + clientHeight) >= scrollHeight;
        var scrollToTop = Math.ceil(scrollTop - clientHeight) >= 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)=>{
            return dispatch(createAction(ActionNames.GET_PRODUCTS,data));
        }
    };
}

/**
 * Map the shared state to properties
 * @param state
 * @returns Object
 */
const mapStateToProps = state => {
    // 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);

import React，{Component}来自'React'；
从“./view”导入ComponentView；
从“axios”导入axios；
从'react redux'导入{connect}；
从“反应路由器哈希链接”导入{HashLink as Link}；
从“../../redux/actions/index”导入{createAction，ActionNames}；
从“历史记录/createBrowserHistory”导入createHistory；
从“react router dom”导入{BrowserRouter}；
/**
*@name产品网格组件
*@type组件
*@作者：迪普·辛格
*/
类主扩展组件{
/**
*建造师
*@param道具
*/
状态={
项目：[]，
孤岛加载：是的，
光标：0
}
建造师（道具）{
超级（道具）；
这个.pageSize=10；
此.state={
数据：[]，
链接：“”，
加载：对，
项目：[]，
孤岛加载：false，
loadAll:false，
光标：0，
面积：12，
产品名称：0，
节：0，
向上滚动：0，
url:“”，
分区大小：“”，
第四节：1
}
this.handleOnScroll=this.handleOnScroll.bind（this）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleOnScroll）；
}
单击后退按钮（）{
const history=createHistory（）；
var myarray=[]；
var url=history.location；
推送（url）；
$（窗口）.on（'popstate'，function（））{
var hashLocation=location.hash；
var hashSplit=hashLocation.split（“/”）；
var hashName=hashSplit[1]；
如果（hashName！=''）{
var hash=window.location.hash；
如果（散列==''）{
var number=url.hash；
number=number.split（'/'）；
this.console.log（“nagesh”+编号[2]）；
}
}
});
}
/**
*组件没有安装
*/
组件更新（道具）{
单击此按钮。单击BackButton（）；
}
componentDidMount（）{
var url=window.location.href；
this.setState（{url:url}）
if（url.indexOf（'#'）>-1）{
if（url.indexOf（'kategori'）>-1）{
url=url.split（'/'）；
var pageNum=url[6]；
var catName=url[4]；
var timesRun=0；
变量滚动=设置间隔（函数（）{
timesRun+=1；
if（timesRun-1）{
url=url.split（'/'）；
var pageNum=url[6]；
var catName=url[4]；
var timesRun=0；
变量滚动=设置间隔（函数（）{
timesRun+=1；
if（timerun）{
this.setState（{isLoading:true，error:undefined}）
axios.post（“/getProducts”）
。然后（（res）=>{
这是我的国家({
productsLen:res.data.results.length，
sectionSize:parseInt（res.data.results.length/12）
});
})
}
手卷{
var self=这个；
函数CALULRL（ss）{
var url=window.location.href；
设置超时(
自我状态({
arrSize:self.state.arrSize+12，
孤岛加载：正确
}), 3000);
var url=window.location.href；
if（self.state.sectionSizeLim-1）{
var url=self.state.url.split（'/'）；
var-fact='/produkt/'+url[4]；
//pushState（null，null，fact）；
//window.location.hash=事实；
//window.location.hash=''；
//window.location.href.split（“#”）[0]；
pushState（“对象或字符串”、“标题”、事实“/”；
}
否则{
//pushState（null，null，“/”）；
//window.location.hash=''；
window.history.pushState（“对象或字符串”、“标题”和“/”）；
}   
}
否则{
if（self.state.url.indexOf（'kategori'）>-1）{
var url=self.state.url.split（'/'）；
var-fact='/kategori/'+url[4]+'/page/'+ss；
//pushState（null，null，fact）；
//window.location.hash=事实；
window.location.hash='/page/'+ss；
}
else if（self.state.url.indexOf（'produkt'）>-1）{
var url=self.state.url.split（'/'）；
var-fact='/produkt/'+url[4]+'/page/'+ss；
//pushState（null，null，fact）；
//window.location.hash=事实；
window.location.hash='/page/'+ss；
}
否则{
//history.pushState（null，null，'/#/page/'+ss）；
window.location.hash='/page/'+ss；
}
}
}
var h=（$（（“html”）.scrollTop（））；
如果（h==0）{
callURL（0）；
}
否则，如果（h>=1500&&h=1930&&h=3860&&h=5790&&h=7720&&h=9650&&h=11580&&h=13510&&h=15440&&h=17370&&h=19300&&h=21230&&h=23160&&h=25090&&h=27