リアクタ・ルータ：ルートをマップできますか？

Question

私は3つのコンポーネントを持っています：AitemComponent、BitemComponent、CitemComponent。 Items配列には項目のリストが含まれています。

私はルートに応じて適切なコンポーネントをレンダリングしたいですか？ 各コンポーネントはルートパラメータをキャッチし、アイテムのビューを返します。

(this.state.items) ? 
       this.state.items.map(item => (
        <Switch> 
        <Route path={"https://stackoverflow.com/a/"+item.id} component={AitemComponent} /> 
        <Route path={"/b/"+item.id} component={BitemComponent} /> 
        <Route path={"/c/"+item.id} component={CitemComponent} /> 
        </Switch> 
       )) 
       : null 

私が代わりに<Route />のちょうど<Aitem id="item.id" />を設定することができることを知っています。しかし、私はルータを使用してすべてを処理したい、それは可能ですか？この方法が奇妙に聞こえる場合、他の方法はありますか？

これは動作せず、これが出力される。

オブジェクトが反応子供（実測値：鍵{}を持つオブジェクト）として有効ではありません。子コレクションをレンダリングする場合は、代わりに配列を使用するか、ReactアドオンのcreateFragment（オブジェクト）を使用してオブジェクトをラップします。

ありがとうございます！

Answer 1

これは、各項目のページではありません。したがって、上に書いたコードの代わりに、このように書かなければなりません。

//generate your this.state.search_result 
//put your component here : this.state.component 
//pass the parameters in the Component Tag 
//Example : 
{ 
        (this.state.search_result) && (this.state.component) && 
         this.state.search_result.map((item, key) => (
          <this.state.component {...this.props} 
               aria_expanded={this.state.idofthis === item.id ? true : false} 
               imageOfThis={(item.images && item.images[0]) ? item.images[0].url : null} 
               href={(item.href) ? item.href : null} 
               duration_ms={(item.duration_ms) ? item.duration_ms : null} 
               key={key} 
               id={item.id} 
               name={item.name} 
               accordion={'#accordion-result'} /> 
        )) 
        } 

Answer 2

これは可能なはずですが、私はあなたがmap関数の外で<Switch>コンポーネントを残しておく必要があります信じています。

{ 
    (this.state.items) && 
    <Switch> 
     this.state.items.map(item => (
     <Route path={"https://stackoverflow.com/a/"+item.id} component={AitemComponent} /> 
     <Route path={"/b/"+item.id} component={BitemComponent} /> 
     <Route path={"/c/"+item.id} component={CitemComponent} /> 
    )) 
    </Switch> 
}