2016-08-01 14 views
10

ES6 extend özelliğinin React-Router "withRouter" bileşeniyle birlikte kullanılmasının bir yolu var mı? BöyleReact-Router HOC/withRouter için bir ES6 sözdizimi var mı?

şey:

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

Ya eski kompozisyon kalıbı kullanarak şaşırıp?

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

cevap

12

Evet, çok kolay, (... bileşeni monte edilmiş sonra 2s yönlendirmek gerektiğini söylemiyorum sadece bir örnektir) aşağıya bakın dahil etmek gerekir.

BTW tepki-yönlendirici benim sürüm I bunun şimdiye kadar en yakın olduğunu tahmin 2.6 (2.4+ withRouter için gerekli)

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

olduğunu. Kompozisyonu bir sınıfla birlikte kullanmayı düşünmedim. “MyComponent sınıfınınRouter” ile devam ettiğini umuyordum ama bunun şimdilik işe yarayacağını düşünüyorum. –

+0

delice görünebilir, ancak iyi çalışıyor. redux ile birlikte kullanıyorum ve "izin denetleyici" yüksek mertebeden bileşenle 'dışa aktarma varsayılan bağlantısı (mapStateToProps, {fetchCampaigns}) (Yetkilendirilen Bileşen (Kampanyalar)); –

+0

@MarekJalovec Yorumunuzdaki örnekte Bilgisayar ile koyar mısın? Şunlar olabilir: 'ihracat varsayılan bağlantı (mapStateToProps, {fetchCampaigns}) (AuthorizedComponent (withRouter (Kampanyalar))); –

3

Bunu böyle kullanabilirsiniz.

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

Ama babel-plugin-transform-decorators-legacy

İlgili konular