React-Router HOC/withRouter是否有ES6语法？

Question

有没有办法将ES6 extend功能与React-Router"withRouter"组件一起使用？

像这样的东西:

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();
   }
   ...
}

还是我坚持使用旧的构图模式？

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

Answer 1

是的,这很容易,请看下面(不是说你应该在组件安装后重定向2s ......只是一个例子).

BTW我的react-router版本是2.6(withRouter需要2.4+)

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);

Answer 2

你可以这样使用它。

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

但是你必须包含babel-plugin-transform-decorators-legacy