AnimatedRoute Wrapper

AnimatedRoute.js

import React from "react";
import { Route } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import { firstChild } from "../../utils/helpers";

const AnimatedRoute = ({ component: Component, exact, path }) => (
  <Route
    exact={exact}
    path={path}
    render={({ match, ...rest }) => (
      <TransitionGroup component={firstChild}>
       {match && <Component {...rest} />}
      </TransitionGroup>
  )}/>
);

export default AnimatedRoute;

App.js

import React, { Component } from "react";

import AnimatedRoute from "./hoc/animated_route";
import Dashboard from "./dashboard";

export default class App extends Component {
  render() {
    return (
      <div className="wrapper">
        <AnimatedRoute exact path="/" component={Dashboard} />
      </div>
    );
  }
}