Javascript – Reagieren Sie auf Routing-Probleme im Zusammenhang mit der mehrseitigen Paginierung von AntD

Question

Die Verwendung der Tabelle von antd zum Entwickeln einer einfachen mehrseitigen Seite ist in der Tabelle enthalten. Dies ist mein erstes Mal, dass ich „react@15.5.4“, „react-router@3.0.5“ und „antd@2.0.9“ verwende Routing: Sie können die Seitennummernroute zum Browser hinzufügen, indem Sie für mehrere Seiten auf die Seitennummer klicken. Nach dem Aktualisieren kehren Sie jedoch immer noch zur Startseite zurück, oder auch wenn sich die Browseradresse geändert hat, befinden Sie sich immer noch auf der ursprünglichen Seitennummer Seite und es gibt keinen Sprung. Können Sie mir helfen?

1, Routenverteilung

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, auf der Finanzseite, 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, Tabellenkomponente im Finanzwesen

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

Answer 1

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

Answer 2

你触发react更新的setState在哪？