React Router'a ek parametreler eklenmesi

Question

Geçiş yaptığım bileşene ek parametrelerimi nasıl iletebilirim.

Rotalarım aşağıdaki gibi. Bir yazarın ayrıntıları için bir yazar ve diğeri için iki yol ilan ettim. aşağıdaki gibi

var routes = (
    <Route path="/" component={require('./components/main')}>   
     <Route path="authors" component={require('./components/authors/authorPage')}/> 
     <Route path="authors/:authorId" component={require('./components/authors/AuthorDetails')}/> 
    </Route> 
); 

module.exports = routes; 

Ve AuthorList Page

işlevi yoktur.

showAuthorDetails(authorId) {    

    var myExtraParams = { key1 : val1, key2 : val2}; 
    hashHistory.push(`/authors/${authorId});  
} 

Şimdi benim AuthorDetail sayfasında ben

this.props.params.authorId 

yaparak AuthorID alabilirsiniz Ama aynı zamanda bir nesne olarak myExtraParams geçmek istiyor ancak beyan ve url geçmek istemiyoruz. ben bir şekilde MT nesnesi vermelidir

this.props.params.myExtraParams 

yaparak gibi belki yeni bileşeninde myExtraParams erişmek söylemek istiyorum.

Bunu nasıl yapabilirim (o stateParams kullanarak Açısal UI yönlendirici olur yol gibi)?

Answer 1

denemek ve biraz böylece sevdiği yollarının yapısını değiştirebilir:

var routes = (
    <Route path="/" component={require('./components/main')}>   
     <Route path="authors" component={require('./components/authors/authorPage')}> 
      <Route path="author/:authorId" component={require('./components/authors/AuthorDetails')}/> 
     </Route> 
    </Route> 
); 

Sonra AuthorList Page sen Daha sonra bu erişmek mümkün olmalıdır

... 
renderAuth() { 
    if (this.props.children === null) { 
     return(
      ....your default authorList 
     ) 
    } else { 
     return React.cloneElement(this.props.children || <div />, {myExtraParams: myExtraParams}); 
    } 
} 

render() { 
    <div> 
     {this.renderAuth()} 
    </div> 
} 

showAuthorDetails(authorId) {    
    hashHistory.push(`/authors/author/${authorId});  
} 
... 

yapabilirdi. props.myExtraParams senin authorsDetail sayfa

Answer 2

ben bu soruya bakıyorum. Belki geç ve sen zaten çözümü var ama durumda sadece

router.push({ 
 
    pathname: '/some-route', 
 
    search: '?param=123', 
 
    state: { 
 
    additionalParam: 'value', 
 
    }, 
 
})}

tarafından Ve alıcı bileşeni tarafında yapabilirsiniz değil o, sen

olarak alacak

this.props.location.state.additionalParam

ben yardımcı olur. Başka bir yardım durumunda, bana bildirmekten çekinmeyin. [Bu örnekte] (https://github.com/reactjs/react-router/tree/master/examples/passing-props-to-children gösterildiği gibi

Teşekkür