ReactJS, React-Router Getting previous path - animation

Question

I am trying to make a single page application in which I have 3 components : Index, BluePage and GreenPage
I'm trying to use React and React router to switch through them. The layout is as follows:
This view is supposed to be like a sliding page and can be better visualized like this following diagram:
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.
For example, if the BluePage was in view, and the user pressed the "back", button, the Index should move into view from the right.
On the other hand, if GreenPage was originally in view, the Index should move into view from the left.
The Question
How can I use React Router to send the existing path to the next component, so I can animate the components properly?
Should I continue to use ReactCSSTransitionGroup or should I handle animations in the componentWillMount and componentWillUnmount callbacks?
If so, how does adding CSS classes to objects after initial rendering work?
I apologize if these questions seem somewhat novice - I am still a beginner to ReactJS. Thanks for all the help!
If any clarification is necessary, let me know.

Answer 1

I would recommend you to check react-swipeable-views.
In this component, you just need to add all of your views (components) as children of the SwipeableView component. The currently active view is defined by index prop of the SwipeableView. You switch the view with buttons, you simply need to create a state in the main component (App, for example) and update this state in onClick handler. It would look like this:
class MainComponent extends Component {
state = {
index: 0,
}
onBlueButtonClick() {
this.setState({ index: 1 });
}
render() {
return (
<div>
<div onClick={() => this.onBlueButtonClick()}>Click me!<div />
<SwipeableView index={this.state.index}>
<BlueView />
<GreenView />
<RedView />
<SwipeableView />
</div>
);
}
}
Hope it helps! ;)
EDIT: I have added a button in the example to explain how to use this component when there is no swipe effect. This is a React component and not a React Native, so it was made to work on a website, therefore without a swipe. I use it in one of my projects. Here's a GIF of it.

Answer 2

What I would suggest you is tu use swiper.js. Why?
performant (desktop, mobile)
no jquery needed
huge api, with very usefull features for your use case
change slide programmatically: swiper.slideTo(2) or swiper.nextSlide())
Hash/History Navigation: sync between hash and slides
you can disable touch gestures
etc..
Setup
npm install swiper --save
Import
const Swiper = require('swiper');
or
import Swiper from 'swiper';
Usage
see demos with example