2016-08-01 15 views
10

Czy istnieje sposób użycia funkcji ES6 extend z komponentem React-Router "withRouter"?Czy istnieje składnia ES6 dla React-Router HOC/withRouter?

coś takiego:

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

Albo ja zatrzymany przy użyciu starego składu wzór?

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

Odpowiedz

12

Tak, to proste, patrz poniżej (nie mówiąc trzeba przekierować po 2s część została zamontowana ... tylko przykład).

BTW moja wersja reagować-Router 2.6 (2.4+ wymagana 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); 
+0

to chyba najbliżej do tej pory. Nie myślałem o używaniu kompozycji razem z nazwaną klasą. Miałem nadzieję, że 'class MyComponent rozciąga się z Routerem', ale myślę, że to na razie. –

+0

może wydawać się szalony, ale działa dobrze. Używam go nawet w połączeniu z reduxem i moim "kontrolerem uprawnień" wyższego rzędu komponentem 'export default connect (mapStateToProps, {fetchCampaigns}) (AuthorizedComponent (kampanie));' –

+0

@MarekJalovec W twoim przykładzie w komentarzu gdzie czy wstawiłbyś z Routerem? Czy to jest: 'export default connect (mapStateToProps, {fetchCampaigns}) (AuthorizedComponent (withRouter (Campaigns)));' –

3

Można go użyć w ten sposób.

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

Ale trzeba by to babel-plugin-transform-decorators-legacy

Powiązane problemy