Animation does not work when switching components, how to fix it?

Question

React

import React, {Component} from 'react';
import './App.scss';

import {Router, Route} from 'react-router-dom';
import createHistory from "history/createBrowserHistory";

import MainPage from './MainPage/MainPage';
import Header from './Header/Header';

import About from './About/About';
import ReactCSSTransitionGroup from "react-addons-css-transition-group";

const history = createHistory();


class App extends Component {

    render() {
        return (
            <div className="App">

                <Header history={history}></Header>
                <ReactCSSTransitionGroup
                    transitionName="anim"
                    transitionEnterTimeout={300}
                    transitionLeaveTimeout={300}>
                    <Router history={history}>
                        <div>
                            <Route exact path="/" component={MainPage}/>
                            <Route path="/about" component={About}/>
                        </div>
                    </Router>
                </ReactCSSTransitionGroup>
            </div>
    );
    }
    }

    export default App;

.anim-enter {
  opacity: .1;
}
.anim-enter.anim-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}
.anim-leave {
  opacity: 1;
}
.anim-leave.anim-leave-active {
  opacity: .1;
  transition: opacity 300ms ease-in;
}

I have already tried many variations (including inside the component itself), and all to no avail, the components do not want to animate when switching from one to another.
Links are inside the Header component.
The router is working.

Answer 1

Deprecated. Use react-transition-group