react-router router.push不会触发componentWillMount

时间:2017-04-14 17:25:28

标签: javascript reactjs react-router

我遇到了react-router的问题。我在页面" / portal / clients // systems // configure",我想将页面更改为" / portal / clients // systems"当我删除系统时。

我使用react-rouer和路由器来访问路由器,我做了一个router.push,但是" / portal / clients // systems"页面没有重新加载。 componentWillMount根本没有被解雇。

我接近这个错误吗?

app.js:

const SystemConfigureAsync = (nextState, cb) => {
    require.ensure([], require =>
        cb(null, require('./modules/systems/SystemConfigure.jsx')
    ));
};

const App = () => (
    <Router history={browserHistory}>
        <Route path="/portal" component={Container} onEnter={redirector.checkRequirements}>
            <Route path="clients/:org">
                <Route path="systems" getComponent={SystemsAsync}>
                    <Route path=":system_id" getComponent={SystemAsync}>
                        <Route path="configure" getComponent={SystemConfigureAsync} />
                    </Route>
                </Route>
            </Route>
        <Route path="*" component={NotFound} />
    </Router>
);

./模块/系统/ SystemConfigure.jsx:

const React = require('react');
const { withRouter } = require('react-router');

const SystemConfigure = withRouter(React.createClass({
    render() {
        const { org: orgId } = this.props.params;
        const { router } = this.props;

        return (
            <ContentSpinner loadingMessage="Loading System" loading={this.state.isLoading}>
                <ConfigureSystem
                    systemId={this.state.model.get('system_id')}
                    model={this.state.model}
                    deleteable={this.state.model.get('deletable')}
                    onDelete={() => {
                        router.push(`/portal/clients/${orgId}/systems`);
                    }}
                />
            </ContentSpinner>
        );
    },
}));

module.exports = SystemConfigure;

1 个答案:

答案 0 :(得分:0)

Panther的评论帮了很多忙。

我添加了路线:

<Route path="systems/delete-system/:delete_system_id" getComponent={SystemsAsync} />

这就是componentWillReceiveProps的样子:

componentWillReceiveProps(nextProps) {
    const { router } = this.props;
    const { org: orgId, delete_system_id } = nextProps.params;

    if (delete_system_id) {
        this.setState({ systemishes: reject(this.state.systemishes, sys => sys.system_id === delete_system_id) });
        router.push(isMsp() ? `/portal/partners/${orgId}/systems` : `/portal/clients/${orgId}/systems`);
    }
},

现在就像魅力一样