react+antd分頁 實現分頁及頁面刷新時回到刷新前的page

antd框架地址：https://ant.design/index-cn

利用antdUI框架做了個分頁，其他功能都沒問題，但是頁面跳轉后刷新會回到第一頁，經過學習，在組件里增加了hash值，詳情請看代碼，實現了頁面跳轉后刷新依然顯示刷新前的頁面。

import React from 'react'
import { Pagination, Spin } from 'antd'  //引入分頁組件
import 'whatwg-fetch'
import './agricultural.less'

class Agricultural extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      agriculturalList: [],
      currentData: [],
      total: 0,
      pageSize: 3,
      pageNumber: parseInt(window.location.hash.slice(1), 0) || 1 //獲取當前頁面的hash值，轉換為number類型
    }
    // 在react中點擊事件里面 setState 時會使this重新定義，所以在點擊的函數里面使用this.setState()時會報錯this.setState not a function，因此需要提前給點擊事件的函數綁定this
    this.onPageChange = this.onPageChange.bind(this);
    this.createMarkup = this.createMarkup.bind(this);
  }
  componentDidMount() {
    this.handleAnchor() //頁面刷新時回到刷新前的page
  }
  handleAnchor() {
    this.onPageChange(this.state.pageNumber, this.state.pageSize); //手動調用onPageChange,傳入當前頁數和每頁條數
  }
  
  onPageChange(page, pageSize) {
    this.setState({
      pageNumber: page
    }, () => {
      window.location.hash = `#${page}`; //設置當前頁面的hash值為當前page頁數
    })
  }

  render() {
    const agriculturalListData = this.state.currentData;return (
        <div className="agricultural-layout">
         // 你要顯示的數據內容

//分頁實現

<div className="pagination">
<Pagination
className="pagination-com"
showQuickJumper
hideOnSinglePage={ true }
defaultCurrent={ this.state.pageNumber }
current={ this.state.pageNumber }
total={ this.state.total }
pageSize={ this.state.pageSize }
onChange={ this.onPageChange }
showTotal={ (e) => {
return "Total " + e + " items"
} } />
</div>
</div>

        </div>
      )


  }

}
export default Agricultural;