反応ルータを使用してすべての子コンポーネントを一度にレンダリングする方法

Question

私のAppコンポーネントのすべての子コンポーネントをページにレンダリングする必要があります。私は

が、私はそれが{this.props.children}を持っている内App（親）コンポーネントを作り、中にやっていること

私main.js（私はルータを使用している）私が持っている：

render(<Router history={hashHistory}> 
 
      <Route path="/" component={App}> 
 
       <Route path="/blog" component={MiniBlog} /> 
 
       <Route path="/contact" component={Contact} /> 
 
       <Route path="/about" component={About} /> 
 
      </Route> 
 
     </Router>, 
 
document.getElementsByClassName('container')[0]);

反応ルータの仕事は、対応するルートをクリックするとコンポーネントが切り替わるので、かなりうまくいきます。私は、ページに表示するすべての子コンポーネントを必要とする（一度に、たとえば、積み重ねられた。）ので、私はルートを持つ有効成分（アニメーションスクロールの一種）にアニメーション化することができ、代わりの

を必要

挙動アクティブなコンポーネントを切り替える。

react-routerがこれに最適なのかどうかわかりませんが、これを行う方法については何か提案があります。

ありがとうございます！

Answer 1

ちょうどあなたのCSSを更新react-router original example

を見てみましょうので、代わりにそれがイン・アウトなどのスライドになりますで、フェードアウト

.example-enter { 
    opacity: 0.01; 
    left: -1000px; 
    transition: opacity .5s ease-in, left 1s; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    left: 0px; 
} 

.example-leave { 
    left: 0px; 
    opacity: 1; 
    transition: opacity .5s ease-in, left 1s; 
} 

.example-leave.example-leave-active { 
    opacity: 0; 
    left: 1000px; 
} 

また例えば適切なReactCSSTransitionGroup遷移特性を調整します

transitionEnterTimeout={1000} 
transitionLeaveTimeout={1000}