如何在使用 react-router 时一次渲染所有子组件答案

【问题标题】：How to render all child components at once while using react-router如何在使用 react-router 时一次渲染所有子组件
【发布时间】：2016-12-09 04:07:21
【问题描述】：

我需要将我的 App 组件的所有子组件渲染到页面。

我做了什么

我制作了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 的工作，因为当我单击相应的路由时组件会切换。

需要的行为

我需要所有子组件都显示在页面上（一次，比如说，堆叠。）所以我可以使用路由（一种滚动动画）为活动组件设置动画，而不是通过活动组件切换。

我不确定react-router 是否适合此操作，但我愿意接受有关如何执行此操作的任何建议。

谢谢！

【问题讨论】：

如果只想动画过渡，可以使用ReactCSSTransitionGroup，不用一次显示所有子组件
感谢您的建议，我现在正在检查 ReactCssTransitionGroup。 @Utro

标签： reactjs react-router

【解决方案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}

【讨论】：