title: ReactJS, React-Router Getting previous path
body: <p>I am trying to make a single page application in which I have 3 components : <strong>Index, BluePage and GreenPage</strong></p>
  
  <p>I'm trying to use React and React router to switch through them. The layout is as follows:</p>
  
  <p>This view is supposed to be like a sliding page and can be better visualized like this following diagram:</p>
  
  <p><a href="https://i.stack.imgur.com/aBmDg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aBmDg.png" alt="enter image description here"></a></p>
  
  <p>In order to do these transitions, I am currently using ReactCSSTransitionGroup and CSS classes, however it is becoming difficult as the direction the page must animate depends on the page that was being viewed before. </p>
  
  <p>For example, if the BluePage was in view, and the user pressed the "back", button, the Index should move into view from the right.</p>
  
  <p>On the other hand, if GreenPage was originally in view, the Index should move into view from the left.</p>
  
  <h2><strong>The Question</strong></h2>
  
  <ul>
  <li><p>How can I use React Router to send the existing path to the next component, so I can animate the components properly? </p></li>
  <li><p>Should I continue to use ReactCSSTransitionGroup or should I handle animations in the componentWillMount and componentWillUnmount callbacks? </p>
  
  <ul>
  <li>If so, how does adding CSS classes to objects after initial rendering work?</li>
  </ul></li>
  </ul>
  
  <hr>
  
  <p>I apologize if these questions seem somewhat novice - I am still a beginner to ReactJS. Thanks for all the help! </p>
  
  <p>If any clarification is necessary, let me know.</p>