javascript - react关于antd多页pagination的路由问题
PHPz
PHPz 2017-05-19 10:16:55
0
2
1038

用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}
/>
PHPz
PHPz

学习是最好的投资!

全部回复(2)
刘奇

我自己解决了,在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,
        });
    }
过去多啦不再A梦

你触发react更新的setState在哪?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!