在React JS中单击浏览器后退按钮时,window.location,hash出现问题

时间:2018-10-06 09:53:54

标签: javascript jquery reactjs

我正在为别人编写代码。

我们正在根据用户的滚动方式从数据库加载内容。当用户滚动时,数据一直保持加载状态,直到从数据库中检索到所有数据为止。客户端希望查看正在加载数据的段号。

要在URL中显示数字,以前的开发人员已使用window.location.hash(),但是由于这个原因,当用户单击后退按钮时,我们无法将其带到上一页。相反,它会继续在页面上跳转几次,然后返回。

我不明白我还需要做什么来解决它。下面是代码:

    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';
/**
 * @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
        }
        // if(props.query){
        //  this.getProducts();
        // }
        this.handleOnScroll = this.handleOnScroll.bind(this);

    }

    componentWillMount() {

        // this.loadMore()
        // console.log(this.props);


    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleOnScroll);

    }


    /**
     * Component Did Mount
     */
    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;
                window.location.hash = "/"+ss;

                            // 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;
                            window.location.hash = "/"+ss;
                            // 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);
                            window.location.hash = "/"+ss;
                        }
                        else{
                            clearInterval(Scrolling)
                        }
                    },1000);

                }

                }

        const {emitter} = this.props;
        emitter.addListener("REFRESH_PRODUCTS",(query)=>{               
            this.getProducts(1,query)
        })
        this.setState({data:this.props.data})
        // this.loadMore()
        window.addEventListener('scroll', this.handleOnScroll);
        this.doQuery();
    }
    componentWillReceiveProps(newProps){
        if(JSON.stringify(this.props.query)!=JSON.stringify(newProps.query)){
            this.getProducts(1,newProps.query)
        }
        // console.log(this.state.arrSize);

    }
    // scrollIt=() => { window.scrollTo(0, 1000)}
    doQuery = () => {
        this.setState({ isLoading: true, error: undefined })
        axios.post('/getProducts')
            .then((res) => {
                // console.log(parseInt(res.data.results.length/12))
                this.setState({
                    // items: [...state.items, ...res.items],
                    // cursor: res.cursor,
                    // isLoading: false
                    // newData: this.state.newData.slice().concat(res.data)
                    // newData: this.state.olddata.concat(res.data.results)
                    productsLen:res.data.results.length,
                    sectionSize:parseInt(res.data.results.length/12)
                });
            })
    }
    handleOnScroll() {
        var self = this;
function callURL(ss){
    // var self = this;
    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 = "/"+ss;
                // 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 = "/"+ss;
                // window.location.hash = '';
                // window.location.href.split('#')[0];
                // window.history.pushState("object or string", "Title", fact,"/");
            }
            else {
                // history.pushState(null, null, '/');
                var fact = '/' + ss ;
                window.location.hash = "/"+ss;
                // 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 = "/"+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 = "/"+ss;
            }
            else {
                // history.pushState(null, null, '/#/page/' + ss);
                window.location.hash = "/"+ss;
            }
        }
}
        var h = ($("html").scrollTop());
        if(h == 0 ){
            callURL(0);
        }
        else if(h >= 0 && 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 : this.pageSize,
            limit : 5000,
            // skip : (page-1)*this.pageSize
            skip : 0
        };
        obj.query = {
            ...obj.query,
            state : 'published'
        }
        getProducts(obj).then(action=>{
            // // if(page>1){
            //  document.getElementById('product-grid').scrollIntoView();   
            // // }

        })
    }

    /**
     * Render the view
     * @returns {*}
     */
    render() {
        return (ComponentView.bind(this))();
    }
}

/**
 * Bind Actions
 * @param dispatch
 * @returns Object
 */
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
    };
};

//Set display name to be used in React Dev Tools
Main.displayName = 'Product Grid';

export default connect(mapStateToProps,bindAction)(Main);

这是我们遇到问题的站点。 https://www.tagminepenge.dk/

转到某个页面并向下滚动,然后尝试单击浏览器的后退按钮。您将了解该问题。

谢谢。

1 个答案:

答案 0 :(得分:0)

之所以发生这种情况,是因为每次您调用window.location时,都会在浏览器历史记录堆栈中推送一个新的URL。为了解决这个问题,请使用react路由器提供的 history.replace ,它将替换历史记录堆栈中的当前url,因此当您返回时要提出同样的问题。 history

import React, {Component} from 'react';

export default class Logout extends Component {
constructor(props) {
    super(props);        
}

Logout = () => {
    this.props.history.replace('/');
}
render() {
    return (
        <div>
            <h1>Your Links</h1>
            <button onClick={this.Logout}>Logout</button>
        </div>
    );
}

}