Ich beschäftige mich immer noch mit React und React-Router, aber ich frage mich, wie ich mit React-Router einfach den Anwendungsstatus aktualisieren kann, ohne die DOM-Knoten neu zu rendern.

Nehmen wir zum Beispiel an, ich habe:

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

Ich möchte die Zuordnung des React-Routers wiederverwenden, aber einfach den aktuellen Bildschirm der App-Komponente aktualisieren.

Der Grund ist, dass ich im obigen Beispiel drei Bildschirme horizontal angeordnet habe, wobei jeweils nur einer sichtbar ist. Wenn sich die Route ändert, möchte ich auf dem entsprechenden Bildschirm animieren. Wenn ich dazu jeder Route eine Komponente zuordne, rendert der React-Router die anderen Bildschirme erst, wenn die Route übereinstimmt, und es gibt eine merkliche Verzögerung, in der der Bildschirm hineingleitet.

Wenn ich jedoch alle drei Bildschirme im DOM behalte und den Status einfach umschalte, um CSS-Übergänge auszulösen, gibt es keine Verzögerung (da bei entsprechender Verwendung vonwill-change, der Browser kann die Off-Screen-Ebene vorrendern.

Ich habe ein halbes Dutzend Möglichkeiten ausprobiert, um dies zu erreichen, aber sie sind alle sehr verrückt oder beinhalten das Duplizieren des passenden Codes. Was mache ich falsch

Auch möchte ich vermeiden, etwas wie Redux hinzuzufügen, um dieses Problem möglichst zu beheben.