javascript - 渲染 subview ，维护历史记录而不重新渲染整个 View 。这可能吗？

Question

我正在将现有的 React 应用程序从使用 director 迁移到使用 react-router。虽然到目前为止我很喜欢它，但对于director来说，在不重新渲染整个页面的情况下维护历史记录是很容易的，而且我不确定这对于react-router是否可行。

我想要做的是有一个 View ，我们将其称为 Slides 和另外两个嵌套 View 组件，我们将其称为 One 和 Two >。

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

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

现在，在幻灯片之间导航时将播放过渡动画。使用我之前的路由器，我无需再次渲染幻灯片及其所有子组件即可实现此目的。看完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 上，在 render() 方法中使用 {this.props.children} 来定义子组件的位置将由路由器插入。

/slides/one 将渲染组件 Slides 和组件 SlideOne 等。当 的路线发生变化时/slides/one 到 /slides/two 仅渲染子组件。 幻灯片将不会更新。

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

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

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