In this section, we are going to add a bit of animation when users navigate to different pages. We do this using the TransitionGroup and CSSTransition components from the react-transition-group npm package, as shown in the following steps:

1. So, let's first install this package with its TypeScript types:

npm install react-transition-group
npm install @types/react-transition-group --save-dev

TransitionGroup keeps track of all its children inside its local state and calculates when children are entering or exiting.  CSSTransition takes whether children are leaving or exiting from TransitionGroup and applies CSS classes to the children based on that status. So, TransitionGroup and CSSTransition can wrap our routes and invoke CSS classes that we can create to animate pages in and out.

2. So, let's import these components into Routes.tsx:

import { CSSTransition, TransitionGroup } from "react-transition-group";

3. We also need to import RouteComponentProps from React Router:

import { Redirect, Route, RouteComponentProps, Switch} from "react-router-dom";

4. Let's use RouteComponentProps as the Route component props type:

const Routes: React.SFC<RouteComponentProps> = props => {
  ...
}

5. Let's add the CSSTransition and TransitionGroup components to the JSX around the Switch component:

<TransitionGroup>
  <CSSTransition
    key={props.location.key}
    timeout={500}
    classNames="animate"
    >
    <Switch>
      ...
    </Switch>
  </CSSTransition>
</TransitionGroup>

TransitionGroup requires children to have a unique key for it to determine what is exiting and entering. So, we have specified a key attribute on CSSTransition to be the location.key property from RouteComponentProps. We have specified that the transition is going to run for up to half a second via the timeout attribute. We have also specified the CSS classes that are going to be invoked with an animate prefix via the classNames attribute.

6. So, let's add these CSS classes in index.css:

.animate-enter {
  opacity: 0;
  z-index: 1;
}
.animate-enter-active {
  opacity: 1;
  transition: opacity 450ms ease-in;
}
.animate-exit {
  display: none;
}

CSSTransition is going to invoke these CSS classes when its key changes. The CSS classes initially hide the element being transitioned and gradually ease the element's opacity so that it shows.

7. If we go to index.tsx, we get a compilation error where we reference the Routes component because it is expecting us to pass props such as history from the router:

Unfortunately, we can't use the withRouter higher order component because this would be outside the Router component. To resolve this, we can add a new component called RoutesWrap, which doesn't take in any props and wraps our existing Routes component. The Router will move up to RoutesWrap and will contain a Route component that always renders our Routes component.

8. So, let's add this RoutesWrap component to Routes.tsx and export RoutesWrap instead of Routes:

const RoutesWrap: React.SFC = () => {
  return (
    <Router>
      <Route component={Routes} />
    </Router>
  );
};

class Routes extends React.Component<RouteComponentProps, IState> { 
  ...
}

export default RoutesWrap;

  The compilation error goes away, which is great.

9. Let's now remove Router from our Routes component, leaving the div tag as its root:

public render() {
  return (
    <div>
      <Header />
      <TransitionGroup>
        ...
      </TransitionGroup>
    </div>
  );
}

If we go to the running app and navigate to the different pages, you'll see a nice fade animation as the page comes into view.