渡す追加のパラメータは、私は私がに移行していますコンポーネントに追加parametrsを渡すことができますどのようにルータ

Question

を反応します。

私はroutes.jsを以下のように持っています。私はauthorListのために2つのパスを宣言し、別の著者の詳細についてもう1つのパスを宣言しました。

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; 

そして、私の著者ページには次のような機能があります。

showAuthorDetails(authorId) {    

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

は今私のAuthorDetailページでは、私は

this.props.params.authorId 

を行うことによってauthorIdを得ることができますしかし、私はまた、オブジェクトとしてmyExtraParamsを渡したいが、宣言したURLでそれを渡す必要はありません。 は私が何とかMTにオブジェクトを与える必要があります

this.props.params.myExtraParams 

を行うことによってのように、おそらく、新しいコンポーネントでmyExtraParamsにアクセス言いたいです。

私はそれをどのように行うことができます（stateParamsを使用して角度UIルータで発生方法のように）？

Answer 1

あなたは試してみて、少しそうのようなあなたのルートの構造を変更することができます：

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

は、その後、あなたのauthorListページであなたは、このにアクセスすることができるはず

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

行うことができます。あなたのauthorsDetailページでprops.myExtraParams

Answer 2

私はこの質問を見ています。たぶん私は後半だとあなたは既に解決策を持っているが、その後あなたは、単に

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

と受信コンポーネント側でこれを行うことができない場合であれば、あなたは

としてそれを取得します

this.props.location.state.additionalParam

私はそれが役に立てば幸い。任意の更なる援助の場合、私に知らせて自由に感じます。

おかげ