willTransitionFrom is never triggered

[liouh]

I used this package to replace react-proxy-loader. While willTransitionTo is working great, willTransitionFrom never triggers.

The "component" being sent to willTransitionFrom appears to be the proxy component, and thus always fails the component.willTransitionFrom check:

https://github.com/odysseyscience/react-router-proxy-loader/blob/master/index.js#L34

'        willTransitionFrom: function(transition, component, callback) {',
'            if (component && component.willTransitionFrom) {',
'                component.willTransitionFrom(transition, component, callback);',

I added component = component.state.component; to the first line of the function above, and it does trigger willTransitionFrom on the dynamically loaded component. However, since component.state.component is the React class definition, and not the instance, I don't have access to the component state as documented by react-router below:

willTransitionFrom(transition, component, callback)

Called when an active route is being transitioned out giving you an opportunity to abort the transition. The component is the current component, you'll probably need it to check its state to decide if you want to allow the transition (like form fields).

Is there a way to make willTransitionFrom trigger with the proper component instance?

Any guidance would be appreciated. Thanks!

[seanadkinson]

Hmmm, that's a tough one. Nothing is jumping out at me right now as a possible fix. Will need to dig deeper into the react-router source code, and see if we can get a handle on the actual component instance somehow.

Thanks for your investigation work on this. I'll try to give it some time tonight or tomorrow.

[seanadkinson]

How about using components.refs to access the instance of the proxied component? Haven't tested yet, but would theoretically work.

mixinReactProxy.js - Notice line 7

module.exports = function(React, desc) {
    desc.displayName = "ReactProxy";
    desc.render = function() {
        var Component = this.state.component;
        if(Component) {
            this.props.ref = "proxyComponent";     // <---- Add this line
            return React.createElement(Component, this.props, this.props.children);
        } else if(this.renderUnavailable) {
            return this.renderUnavailable();
        } else {
            return null;
        }
    };
    desc.getInitialState = function() {
        return { component: this.loadComponent() };
    };
    desc.componentDidMount = function() {
        if(!this.state.component) {
            this.loadComponent(function(component) {
                this.setState({ component: component });
            }.bind(this));
        }
    };
};

And then in index.js:

    component.willTransitionFrom(transition, component.refs.proxyComponent, callback);'

Can you test it out for your purposes, and see if it works the way you expect? If so, I can put this in an updated release.

[liouh]

Looks promising. I’ll test it out tomorrow and let you know.

[seanadkinson]

Pushed 0.2.2

[liouh]

Thanks!