Có cú pháp ES6 cho React-Router HOC/withRouter không?

Question

Có cách nào để sử dụng tính năng ES6 extend với bộ phận React-Router "withRouter" không?

Something như thế này:

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

Hoặc tôi đang mắc kẹt bằng cách sử dụng mô hình thành phần cũ?

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

Answer 1

Vâng, thật dễ dàng, xem dưới đây (không nói rằng bạn nên chuyển hướng 2s sau khi thành phần đã được gắn ... chỉ là ví dụ).

BTW phiên bản của tôi về phản ứng-router là 2,6 (2.4+ cần thiết cho 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); 

Answer 2

Bạn có thể sử dụng nó như thế này.

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

Nhưng bạn sẽ phải bao gồm babel-plugin-transform-decorators-legacy