React-Router route transitions (i.e. redirects) using ES6

While ES6 is a fantastic improvement over ES5, there are certain limitations when using it with React, most notably, mixins, which React supports in its own implementation, but ES6 does not. I recently ran into one such I-can't-use-mixins limitation when trying to implement route transitions using React-Router.

This post provides a workaround for route transitions without the use of mixins. Hopefully this will save time for others that run into the same issue.

For some additional detail on this solution, refer to:

One quick warning/caveat: "context", which is used below, is an undocumented feature of React, so keep your eyeballs open for changes. Refer to this post for a good write-up on using context.


Make sure to include props and context in your constructor:

class ExampleComponent extends React.Component {

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

    // ...


Add this static property to your component:

ExampleComponent.contextTypes = {
    router: React.PropTypes.func.isRequired
};


Then you can call your route:

this.context.router.transitionTo(/your-route-name);

Questions, comments, improvements?