Is there an ES6 syntax for React-Router HOC/withRouter?

Question

Is there a way to use the ES6 extend feature with the React-Router "withRouter" component?

Something like this:

import { withRouter } from 'react-router';

export default class  extends withRouter {
   ...
   //Use react router history prop to navigate back a page.
   handleSomeEvent() {
     this.props.router.goBack();
   }
   ...
}

Or am I stuck using the old composition pattern?

var MyComponent = React.createClass({
   ...
});
export default withRouter(MyComponent);

Answer 1

You could use it like this.

@withRouter
export default class  extends withRouter {
   ...
   //Use react router history prop to navigate back a page.
   handleSomeEvent() {
     this.props.router.goBack();
   }
   ...
}

But you would have to include babel-plugin-transform-decorators-legacy

Answer 2

Yes, it's easy, see bellow (not saying you should redirect 2s after component was mounted... just an example).

BTW my version of react-router is 2.6 (2.4+ required for withRouter)

import React, { Component } from 'react';
import { withRouter } from 'react-router';

class MyComponent extends Component {
    componentDidMount() {
        setTimeout(() => {
            this.props.router.push('my-url')
        }, 2000);
    }

    render() {
        return (
            <div>My Component</div>
        );
    }
}

export default withRouter(MyComponent);