Scope of 'this' is lost when using static 'willTransitionTo' in ES6.

[erosenberg]

When I try to create a new class in ES6, I have a constructor and a static function 'willTransitionTo' which should redirect a user if they're not logged in. I'm currently passing this in as a prop, but since I'm unable to use 'this' in the scope of the static function, I'm unable to check this.

I'm currently using react-router 0.13.2, and the latest version of React.

class Reports extends React.Component {

     constructor(props, context) {
        super(props, context);    
     }

     // Unable to access this.props because 'this' is undefined.
    static willTransitionTo (transition, context) {
       if (!props.authenticated) {
           // transition here
           transition.redirect('home');
        }
  };

Am I just missing an updated syntax or not binding 'this' properly?
Thanks!

[soupaJ]

In willTransitionTo, 'this' is bound to the Route that you are about to transition too. You have access to the component, but I don't think it is instantiated which means you wouldn't have access to the props yet. You should look at https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js which shows an example of auth flow.

[erosenberg]

Well what would you recommend I do? I don't have a global way of seeing if a user is authenticated or not. Is it worth upgrading to 1.0 from the 'next' branch? @mjackson - is it stable enough? Having a rough time installing it with npm and using it with ES6.

[eiriklv]

@erosenberg #590 is related to your issue and could give you some more insight

[erosenberg]

@eiriklv - I'm using ES6 and webpack/npm, and am unable to get this to work for some reason. I'm also no longer using mixins, which makes the 1.0 proposal pretty much useless to me too, unless that just gets changed to classes somehow. Regardless, I might just be SOL unless someone else has a suggestion. It's a bummer because I really like react-router because it helps me piece together my app easily, but without the ease of being able to redirect a user or use query params simply makes it a pain sometimes.

[ryanflorence]

Statics this is in reference to the class function, not the instance, ES6 or createClass.

You can try 1.0 beta, npm install react-router@beta but it won't do anything about this.

[ryanflorence]

It's a bummer because I really like react-router because it helps me piece together my app easily, but without the ease of being able to redirect a user or use query params simply makes it a pain sometimes.

You don't use this.props in statics, you use the arguments passed to them, which are params and query.