サブルートで駆動される反応ルータベースのコンポーネントと、その上にレンダリングされたページ

Question

HomeComponent、これはアプリケーションのメイン/ホームビューです。 選択したマップマーカーのmapと詳細divが含まれています。 地図に表示されている項目と詳細divはルートで駆動される必要があります。

/citiesは都市 /housesは私の心の中で家

ホームビューが表示されホームビューのサブ経路であるかを定義ルートを表示する必要があります表示されるはずです。

<Route component={HomeComponent}> 
    <Route path="/cities" component=Overview scope="cities"> 
    <Route path=":id" component=Detail scope="cities"/> 
    </Route> 
    <Route path="/homes" component=Overview scope="homes"> 
    <Route path=":id" component=Detail scope="homes"/> 
    </Route> 
</Route> 

scope UIの部分が強調表示するか、別々にレンダリングするHomeComponentための指標です。おそらくlocation.pathNameから抽出される可能性がありますが、ルートパスが変更された場合、それは壊れてしまいます。

したがって、HomeComponentは、マップ内で何をレンダリングするかを知るために、子ルート構成要素props.itemsにアクセスする必要があります。detail div？

さらに、（ページ遷移を使用して）ホームビューの上にレンダリングするルートが存在する必要があります。ホームビューは、再作成するのに費用がかかるため、常にDOM内に存在する必要があります。 ReactCSSTransitionGroupコンポーネントを使用して出入り口をアニメーション化できるように、私はそのようなルートをどこに置くのですか？

アプリのホームビューは、常にhomesまたはcitiesのいずれかを表示し、その上に追加のルートを表示する必要があります。それを達成するためにホームルートのサブコンポーネントとして中間コンポーネントが必要でしょうか？

このような追加の経路は次のようになります。

<Route path="/about"> 
    <Route path="/info"> 
    <Route path="/contact"> 
</Route> 

それらはHomeComponent（絶対）の上にレンダリングされるべきであり、半透明であるか、出入りアニメーションを有することができます。

Answer 1

あなたのHomeComponentにスコープ変数を持つパスを与えるのはどうですか？どのスコープがアクティブかに基づいてHomeComponentを更新するには、componentDidUpdateまたはcomponentWillReceivePropsのスコープの変更をリッスンする必要があります。小道具を介して子コンポーネントにスコープを渡すことができます。

あなたがこのアプローチを使用する場合（それがHomeComponentでレンダリングできるよう）、概要はもはや必要ないかもしれないが、おそらくのようなもの：

<Route path="/:scope" component={HomeComponent}> 
    <Route path="overview" component={Overview} /> 
    <Route path=":id" component={Detail} /> 
</Route> 

あなたがにあなたの情報/連絡先ページのURIをしたい場合あなたは絶対パス（react-router docs）を使用することができ、ルートレベルであってもよいが、それでもHomeComponentの上にレンダリングする、のようなもの：

<Route path="/:scope" component={HomeComponent}> 
    <Route path="overview" component={Overview} /> 
    <Route path=":id" component={Detail} /> 
    <Route path="about" component={About}> 
     <Route path="info" component={Info} /> 
     <Route path="contact" component={Contact} /> 
    </Route> 
</Route>