javascript - react關於antd多頁pagination的路由問題
PHPz
PHPz 2017-05-19 10:16:55
0
2
992

用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學習者快速成長!