搜尋

首頁  >  問答  >  主體

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}
/>
PHPzPHPz2775 天前1074

全部回覆(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
  • 取消回覆