React HOC to prevent leaving a page

PreventLeaveRoute.jsx

import React, { Component, PropTypes } from 'react';

/**
 * Only ever render one of these per page
 *
 * TODO: improve with react-side-effect to better handle multiple instances of this being rendered at once so we can
 * nest the component in forms
 */
export default class PreventLeaveRoute extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  };

  static propTypes = {
    route: PropTypes.object.isRequired,
    locked: PropTypes.bool.isRequired,
    text: PropTypes.string
  };

  static defaultProps = {
    text: 'You have unsaved changes. Would you like to continue?'
  };

  shouldComponentUpdate() {
    return false;
  }

  bindRouteLeaveHook = route => this.context.router.setRouteLeaveHook(route, this.preventRouteLeave);

  componentDidMount() {
    const { route } = this.props;
    this.bindRouteLeaveHook(route);

    window.onbeforeunload = this.preventUnload;
  }

  componentWillReceiveProps({ route }) {
    if (route !== this.props.route) {
      this.bindRouteLeaveHook(route);
    }
  }

  componentWillUnmount() {
    window.onbeforeunload = null;
  }

  preventUnload = () => {
    const { text, locked } = this.props;
    if (locked) {
      return text;
    }
  };

  preventRouteLeave = ({ action }) => {
    const { locked, text } = this.props;

    if (locked) {
      if (!confirm(text)) {
        if (action === 'POP') {
          const { router } = this.context;
          router.goForward();
        }
        return false;
      } else {
        window.onbeforeunload = null;
      }
    } else {
      window.onbeforeunload = null;
    }
  };

  render() {
    return null;
  }
}

I would recommend revising line 57 - 70. I would like to be diplomatic, but I really hate code like that.
It's beyond unreadable.

I haven't test it. But it can be simplified so much. For example, you could write it like this

  preventRouteLeave = ({ action }) => {
    const { locked, text } = this.props;

    if (!locked || confirm(text)) {
      window.onbeforeunload = null;
      return
    }

    if (action === 'POP') {
      const { router } = this.context;
      router.goForward();
    }
  };

Which is much more readable than this

  preventRouteLeave = ({ action }) => {
    const { locked, text } = this.props;

    if (locked) {
      if (!confirm(text)) {
        if (action === 'POP') {
          const { router } = this.context;
          router.goForward();
        }
        return false;
      } else {
        window.onbeforeunload = null;
      }
    } else {
      window.onbeforeunload = null;
    }
  };