title: React Router v4 and React Transition Group v2
body: <p>I am trying to find a working example of low level animations using the React Router v4 with React Transition Group v2. I have looked at the example on the React Router docs but they only use CSS Animation with one route.</p>
  
  <p>This is how I currently use the React Router:</p>
  
  <pre><code>export const App = () =&gt; (
    &lt;div className="app-container"&gt;
      &lt;main className="app-container__content"&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/projects/:slug" component={ProjectPage} /&gt;
          &lt;Route exact path="/" component={StartPage} /&gt;
        &lt;/Switch&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>And this is my Root.jsx:</p>
  
  <pre><code>const Root = ({ store, history }) =&gt; (
    &lt;Provider store={store}&gt;
      &lt;ConnectedRouter history={history}&gt;
        &lt;Switch&gt;
          &lt;Route path="/" component={App} /&gt;
        &lt;/Switch&gt;
      &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;
  );
  </code></pre>
  
  <p>I have tested the solution here: <a href="https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a" rel="nofollow noreferrer">https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a</a> - but it doesn't work. Could some one point me in the right direction?</p>
  
  <p><strong>Update</strong></p>
  
  <p>I have tried like this, but the callback doesn't get called. So I end up with to pages in the dom.</p>
  
  <pre><code>export const App = ({ location }) =&gt; {
    console.log(location);
  
    return (
      &lt;div className="app-container"&gt;
        &lt;main className="app-container__content"&gt;
          &lt;ScrollToTop /&gt;
          &lt;TransitionGroup&gt;
            &lt;Switch key={location.pathname} location={location}&gt;
              &lt;Route exact path="/projects/:slug" component={ProjectPage} /&gt;
              &lt;Route exact path="/" component={StartPage} /&gt;
            &lt;/Switch&gt;
          &lt;/TransitionGroup&gt;
        &lt;/main&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>