Todavía estoy familiarizado con React y react-router, pero me pregunto cómo usar react-router para simplemente actualizar el estado de la aplicación sin volver a representar los nodos DOM.

Por ejemplo, supongamos que tengo:

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

Me gustaría volver a usar la coincidencia del enrutador reactivo, pero simplemente actualizar la pantalla actual del componente de la aplicación.

La razón es que, en el ejemplo anterior, tengo tres pantallas dispuestas horizontalmente con solo una visible a la vez. Cuando la ruta cambia, quiero animar en la pantalla correspondiente. Si hago eso asignando un componente a cada ruta, react-router no muestra las otras pantallas hasta que la ruta coincida, y hay un retraso notable para que la pantalla se deslice.

Sin embargo, si mantengo las tres pantallas en el DOM y simplemente alterno el estado para activar las transiciones CSS, no hay retraso (ya que, con el uso apropiado dewill-change, el navegador puede renderizar previamente la capa fuera de la pantalla).

He intentado media docena de formas de lograr esto, pero todas son muy hacky o implican duplicar el código correspondiente. ¿Qué estoy haciendo mal?

Además, me gustaría evitar agregar algo como Redux solo para solucionar esto si es posible.