title: React Router v4 & CSS Transition Group
body: <p>I have a simple example of react-router v4 &amp; route transitions. It follows the example shown at <a href="https://reacttraining.com/react-router/web/example/animated-transitions" rel="nofollow noreferrer">https://reacttraining.com/react-router/web/example/animated-transitions</a>. The result, however, is only the last route is shown. The others are just blank. <a href="https://codesandbox.io/s/r0PvB30wk" rel="nofollow noreferrer">https://codesandbox.io/s/r0PvB30wk</a>.</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
  import { CSSTransitionGroup } from 'react-transition-group'
  
  import About from './components/About';
  import Home from './components/Home';
  import Topics from './components/Topics';
  
  import './styles.css'
  
  const BasicExample = () =&gt; (
    &lt;Router&gt;
      &lt;Route render={({ location }) =&gt; (
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;Link to="/"&gt;Home&lt;/Link&gt;&lt;/li&gt;
            &lt;li&gt;&lt;Link to="/about"&gt;About&lt;/Link&gt;&lt;/li&gt;
            &lt;li&gt;&lt;Link to="/topics"&gt;Topics&lt;/Link&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;hr /&gt;
          &lt;CSSTransitionGroup
            transitionEnterTimeout={300}
            transitionLeaveTimeout={300}
            transitionName="fade"
          &gt;
            &lt;Route exact path="/"       component={Home}   location={location} key={location.key} /&gt;
            &lt;Route       path="/about"  component={About}  location={location} key={location.key} /&gt;
            &lt;Route       path="/topics" component={Topics} location={location} key={location.key} /&gt;
          &lt;/CSSTransitionGroup&gt;
        &lt;/div&gt;
      )}/&gt;
    &lt;/Router&gt;
  );
  
  render(&lt;BasicExample /&gt;, document.body);
  </code></pre>