willTransitionTo replacement in 1.x

The current stable release 0.13.3 has a very convenient way to intercept routing transitions and do additional prevalidation. One can simply define a willTransitionTo hook and implement the validation logic and trigger a redirect if needed.

var Settings = React.createClass({
  statics: {
    willTransitionTo: function (transition, params, query, callback) {
      auth.isLoggedIn((isLoggedIn) => {
        transition.abort();
        callback();
      });
    }
});

The current 1.x beta releases removed that feature. The transition hooks are now only available on the Router and on the Routes itself but not on the components. So it is not possible to implement such a cross cutting concern by simply decorating the component. For now I use following workaround which is not very nice.

// decorate Component with onEnter hook.

function authenticated(Component) {
  const wrappedComponent = React.createClass({
    statics: {
      onEnter(next, transition) {
        if (!state.get('session.authenticated')) {
          transition.to('/login');
        }
      }
    },
    render() {
      return <Component {...this.props} {...this.state} />;
    }
  });

  return wrappedComponent;
}


// decorate the notAllowed Component
const decorated = authenticated(notAllowed);

// workaround onEnter delegates to statics onEnter of the component
<Route path="/notAllowed" component={decorated} onEnter={decorated.onEnter}/>

Another way to implement this would be to have own derived Route implementations like AuthRoute or so.

[anonymosh]

What were the reasons for this change? I really liked the way the components were responsible for handling / reacting on transition changes. It kept special handling in the context of the respective component.

Now i need to push this everything to the top Route configuration which seems to be an awful way of cluttering the file containing the config with unnecessary functions and imports.

The current auth example seems to simplified for the means of the example. Is there still a way to encapsulate the route transition hooks into a HoC?

[taion]

Not well. More importantly, you can’t bind to context in static methods – in onEnter you can e.g. close over a store.