首页  >  问答  >  正文

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}
/>
PHPzPHPz2733 天前1039

全部回复(2)我来回复

  • 怪我咯

    怪我咯2017-05-19 10:18:55

    我自己解决了,在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,
            });
        }

    回复
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-19 10:18:55

    你触发react更新的setState在哪?

    回复
    0
  • 取消回复