How can I use react-router to trigger state changes?
<p>I'm still coming to grips with React and react-router, but I'm wondering how to use react-router to simply update application state without re-rendering DOM nodes.</p>

<p>For example, suppose I have:</p>

<pre><code>&lt;Router history={browserHistory}&gt;
  &lt;Route path="/" component={App}&gt;
    &lt;IndexRoute screen="main" /&gt;
    &lt;Route path="settings" screen="sync" /&gt;
    &lt;Route path="overview" screen="overview" /&gt;
  &lt;/Route&gt;
&lt;/Router&gt;
</code></pre>

<p>I'd like to re-use react-router's matching but simply update the App component's current screen.</p>

<p>The reason is that suppose in the above example I have three screens arranged horizontally with only one visible at a time. When the route changes I want to animate in the appropriate screen. If I do that by assigning a component to each route, react-router doesn't render the other screens until the route matches, and there's a noticeable lag for the screen to slide in.</p>

<p>However, if I keep all three screens in the DOM and simply toggle state to trigger CSS transitions there is no lag (since, with appropriate use of <code>will-change</code>, the browser can pre-render the off-screen layer).</p>

<p>I've tried half a dozen ways of achieving this but they're all very hacky or involve duplicating the matching code somewhat. What am I doing wrong?</p>

<p>Also, I'd like to avoid adding something like Redux just to fix this if possible.</p>