Как визуализировать все дочерние компоненты одновременно при использовании реактивного маршрутизатора

Question

Мне нужно отобразить все дочерние компоненты моих компонентов приложения на странице.

Что я сделал

Я сделал App (родитель) компонент внутри него {this.props.children} и в моем 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

Посмотрите на react-router original example

Просто обновите ваш CSS поэтому вместо того, замирание в выкатывания будет слайд в выход, например,

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