javascript - react关于antd多页pagination的路由问题

问题描述

问 题

用antd的table开发一个简单的多页页面,多页pagination在table里自带的,小弟第一次用react@15.5.4,react-router@3.0.5,antd@2.0.9,在做路由的时候多页点击页码路由可以添加到浏览器,但是刷新就还是回到首页的,或者后退浏览器地址虽然变了,但是还是在原来的页码页面,并没有跳转,请各位帮个忙能帮我下吗,下面是代码部分

1,路由的分配

class Index extends React.Component {
    render () {
        return (
            <Router history={hashHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={Login}></IndexRoute>
                    <Route path="/finance/:page" component={Finance}></Route>
                </Route>
            </Router>
        );
    }
}

2,在Finance页面,hashHistory.push()

    handleTableChange = (pagination, filters, sorter) => {
        this.fetch({
            results: pagination.pageSize,
            page: pagination.current,
            // sortField: sorter.field,
            // sortOrder: sorter.order,
            ...filters,
        });
        // console.log(pagination)
        hashHistory.push(`/finance/${pagination.current}`);
    }

3, Finance里面的table组件

<Table
    rowSelection={rowSelection}
    columns={this.columns}
    rowKey={record => record.wid}
    dataSource={this.state.data}
    pagination={this.state.pagination}
    loading={this.state.loading}
    onChange={this.handleTableChange}
/>

解决方案

我自己解决了，在componentWillReceiveProps重新加载了，最终效果刷新或者回退都会页面都会跟着变，不知道这个方法对不对

    componentWillReceiveProps(nextProps) {
        // console.log(nextProps);
        const { pagination, filters } = this.state;
        pagination.current = Number(nextProps.params.page);
        this.setState({
            pagination,
        });
        this.fetch({
            size: pagination.pageSize,
            page: pagination.current - 1,
            startDate: this.state.startDate,
            endDate: this.state.endDate,
            ...filters,
        });
    }

这篇关于javascript - react关于antd多页pagination的路由问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！