antd PC框架地址:https://ant.design/index-cn
页面跳转后返回和刷新会回到第一页,在组件里增加了hash值,实现了页面跳转后返回和刷新依然显示当前的页面。
import React, { Component } from 'react'
import { Table } from 'antd';
import 'antd/dist/antd.css';
export default class Index extends Component {
constructor() {
super()
this.state = {
current: parseInt(window.location.hash.slice(1), 0) || 1, //这是主要的
获取当前页面的hash值,转换为number类型
}
}
render() {
const { current } = this.state;
const dataSource = [
{
key: '1',
name: '胡彦斌1',
age: 32,
address: '西湖区湖底公园1号'
},
{
key: '2',
name: '胡彦祖2',
age: 42,
address: '西湖区湖底公园1号'
},
{
key: '3',
name: '胡彦祖3',
age: 42,
address: '西湖区湖底公园1号'
},
{
key: '4',
name: '胡彦祖4',
age: 42,
address: '西湖区湖底公园1号'
},
{
key: '5',
name: '胡彦祖5',
age: 42,
address: '西湖区湖底公园1号'
}, {
key: '6',
name: '胡彦祖6',
age: 42,
address: '西湖区湖底公园1号'
}
];
const columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}
];
return (
<div>
<Table
columns={columns}
dataSource={dataSource}
pagination={{
onChange: page => {
this.setState(
{
current: page
},
() => { window.location.hash = `#${page}`; } //设置当前页面的hash值为当前page页数
);
},
pageSize: 3,
current: current,
}}
/>
</div>
)
}
}