react如何卸载组件,如何防止React组件中的卸载？

I'm trying to implement a feature in my app where when the user tries to navigate away from an un-submitted form, they're given an confirm that asks them if they're sure they want to leave before saving their changes.

The componentWillUnmount method seems like perfect candidate for this because it will fire for all the various ways that a user may abandon the form (changes a parent component state that causes it to disappear, navigates to a different route, etc...). However... I have no way to prevent the unmount when the confirm returns false.

Any suggestions on how I can go about implementing this?

解决方案

This is best handled via react-router: setRouteLeaveHook.

componentWillMount() {

this.unregisterLeaveHook = props.router.setRouteLeaveHook(props.route, this.routerWillLeave.bind(this));

}

routerWillLeave(nextLocation) {

return false;

}

And when component is unmounted, unregister the leave hook:

componentWillUnmount() {

this.unregisterLeaveHook();

}