Question

我正在将现有的反应应用从使用director迁移到使用react-router。虽然到目前为止我很喜欢它，但是导演保持历史而不重新呈现整个页面很容易，而且我不确定react-router是否可以实现这一点。

我想要做的是有一个视图，我们称之为Slides，另外两个嵌套视图组件让我们称之为One和Two。

在路由器中，这些组件将映射到/slides，slides/one和slides/two。

Slides包含各种布局组件，例如Header，Nav和Footer。这些基本上是静态的。

现在，在幻灯片之间导航时会有一个过渡动画。使用我之前的路由器，我无需再次渲染Slides及其所有子组件即可实现此目的。阅读https://github.com/reactjs/react-router/issues/266和https://github.com/reactjs/react-router/issues/3691后，我认为这可能无法实现。

是否可以通过CSSTransitionsGroup执行此操作并接受重新渲染？如果渲染很慢并且那些静态组件闪烁进出或其他东西，那对UI来说就不那么好了。

任何建议都将不胜感激！

Answer 1

您需要定义子路线：

<Route path="slides" component={Slides}>
    <Route path="one" component={SlideOne}/>
    <Route path="two" component={SlideTwo}/>
    <Route path="three" component={SlideThree}/>
</Route>

然后在Slides.jsx上使用{this.props.children}方法中的render()来定义路由器插入子组件的位置。

/slides/one将呈现组件Slides和组件SlideOne等。当路由从/slides/one更改为/slides/two时，只有子组件将被渲染。 Slides将不会更新。

要管理历史记录，您需要在路由器上定义历史记录：

<Router history={browserHistory}>
...
</Router>

These are the docs关于不同的历史模块。

渲染子视图，维护历史记录而不是重新渲染整个视图。这可能吗？

1 个答案: