用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}
/>
怪我咯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,
});
}