小编bri*_*old的帖子

我仍然要处理React和react-router,但我想知道如何使用react-router简单地更新应用程序状态而无需重新呈现DOM节点.

例如,假设我有:

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute screen="main" />
    <Route path="settings" screen="sync" />
    <Route path="overview" screen="overview" />
  </Route>
</Router>

我想重新使用react-router的匹配,只需更新App组件的当前屏幕即可.

原因是假设在上面的例子中我有三个水平排列的屏幕,一次只能看到一个.当路线改变时,我想在适当的屏幕中进行动画制作.如果我通过为每个路由分配一个组件来做到这一点,则在路由匹配之前,react-router不会呈现其他屏幕,并且屏幕滑入会有明显的延迟.

但是,如果我将所有三个屏幕保留在DOM中并且只是切换状态以触发CSS转换,则没有延迟(因为,通过适当使用will-change,浏览器可以预渲染屏幕外层).

我已经尝试了六种方法来实现这一点,但它们都非常hacky或涉及重复匹配代码.我究竟做错了什么？

此外,我想避免添加像Redux这样的东西来解决这个问题.