React router animations while using react-router-config

I've found a way to make my components animate while leaving or entering using "React Router Transition". The problem is I'm using react-router-config and I'm wondering how to animate route changes using renderRoutes(routes) where my routes are:

export default [
  {
    component: App,
    routes: [
      {
        component: NewRecipe,
        path: '/add-recipe'
      },
      {
        component: RecipeList,
        path: '/recipes/:page?/:sortType?/:size?'
      },
      {
        component: Recipe,
        path: '/recipe/:id'
      },
      {
        component: SignForm,
        path: '/sign'
      },
      {
        component: User,
        path:'/user/:id',
        routes: [
          { path: '/user/:id/overall',
            component: UserInfo
          },
          { path: '/user/:id/opinions',
            component: UserOpinions
          },
          { path: '/user/:id/recipes',
            component: UserRecipes
          }
        ]
      }
    ]
  }
];

How can I animate certain routes while leaving/entering?

At first I tried simple ReactCSSTransitionGroup but it doesn't work while routing.