this.context.router undefined in IE10

We’re currently running version 0.13.3 and are using the State Mixins to access .getParams() throughout the our app. Specifically we are calling the method in componentDidMount and componentWillReceiveProps.

When running the app in IE10, we get the error Unable to get property 'getCurrentParams' of undefined or null reference, which is being traced back to the getParams method of the State object:

I should also note that we’re using Webpack and the Babel loader.

[leonid-shevtsov]

I want to add that this is caused by Babel classes inheritance not entirely supported in IE<11, and can be fixed by adding an additional Babel transformer.

https://babeljs.io/docs/advanced/caveats/#classes-10-and-below-

[bsbeeks]

To summarize:

getParams()

Defining contextTypes appeared to have fixed any issues in IE10 for @coryvirok. However, it did not work for me. Instead I had to implement the params through the RouteHandler props as outlined in the docs (https://github.com/rackt/react-router/blob/v0.13.3/docs/guides/overview.md#dynamic-segments):

Router.run(routes, function (Handler, state) {
  var params = state.params;
  React.render(<Handler params={params}/>, document.body);
});

// and then pass the params down to every use of `<RouteHandler/>`
<RouteHandler {...this.props}/>

// Inbox ends up looking like this
var Inbox = React.createClass({
  render: function () {
    return (
      <div>
        <Toolbar/>
        <Messages/>
        <RouteHandler {...this.props}/>
      </div>
    );
  }
});

// and Message changes to:
var Message = React.createClass({
  render: function () {
    return (
      <div>{this.props.params.messageId}</div>
    );
  }
});

isActive()

If you are using this method and need compatibility in IE10, you will need to implement a custom method to handle this. I decided to create a Router Utils that housed this method:

isActive (pathParts) {
  const path = window.location.hash;
  const routes = path.split('/').filter(string => {
    return string.length && string !== '#';
  });

  const isActive = pathParts.filter(route => {
    return routes.indexOf(route) < 0;
  });

  return !isActive.length;
}

Though it’s not the best fix, it did resolve any issues with IE10. The downside to this approach is you don’t have access to the route names. Instead you have to target parts of the url. This isn’t a big issue for me since my route names and paths are consistent. An added bonus to this approach is I can check if a child route belongs to a parent route by passing in the parent route path:

// if my current path is /myparent/children/:id
// then within my children components I can run:
RouterUtils.isActive(['myparent']); // returns true

I haven’t tested other methods that utilize this.context.router, but I’m assuming you’ll run into similar issues in IE10.