<p dir="auto">Now if using "/components/layout", layout component is unmounting and animations don't work</p>
<p dir="auto">layout.render:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const { pathname } = this.props.url
let key = pathname.split('/')[ 1 ] || 'root'

return (
&lt;TransitionGroup&gt;
   { React.cloneElement( this.props.children, { key: key } ) }
&lt;/TransitionGroup&gt;
)"><pre class="notranslate"><code class="notranslate">const { pathname } = this.props.url
let key = pathname.split('/')[ 1 ] || 'root'

return (
&lt;TransitionGroup&gt;
   { React.cloneElement( this.props.children, { key: key } ) }
&lt;/TransitionGroup&gt;
)
</code></pre></div>
<p dir="auto">sorry for my bad english<br>
need to implement transitions<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/9660479/23167347/1fa51e8c-f855-11e6-82c7-e8a4d3dc7852.jpg"><img src="https://cloud.githubusercontent.com/assets/9660479/23167347/1fa51e8c-f855-11e6-82c7-e8a4d3dc7852.jpg" alt="req" style="max-width: 100%;"></a></p>
<p dir="auto">Having animated route transitions would be nice, as this is one of the many benefits through client-side routing. Doing so should be left up to the user in my opinion (some people prefer CSS transitions over more fine-grained control with <code class="notranslate">react-motion</code> etc). As I understand it, one would need to modify the top-level App component.</p>
<p dir="auto">The <a href="https://github.com/zeit/next.js/blob/master/client/next.js#L13">client entry file</a> seems to look for a globally assigned <code class="notranslate">__NEXT_DATA__.app</code> variable but I can't find any documentation on that.</p>