React Router animation with typescript and Pose

App.jsx

// Libraries
import * as React from "react";
import posed, { PoseGroup } from 'react-pose';
import { Route, Switch, BrowserRouter } from "react-router-dom";

// Layout
import Layout from "./Layout";

// Components
import Dashboard from "./components/dashboard/Dashboard";
import SubComponentIndex from "./components/subcomponent/SubComponentIndex";
import SubComponentAdd from "./components/subcomponent/SubComponentAdd";

class App extends React.Component<any, any> {

    public renderRoute(): any {
        return (location: any): any => {
            const RouteContainer = posed.div({
                enter: { opacity: 1, delay: 400, beforeChildren: true },
                exit: { opacity: 0 }
            });
            return (
                <Layout>
                    <PoseGroup>
                        <RouteContainer key="RouteContainer">
                            <Switch location={location.pathname}>
                                <Route key="home" exact={true} path="/" component={Home} />
                                <Route key="subComponentIndex" exact={true} path="/subcomponent" component={SubComponentIndex}/>
                                <Route key="subComponentAdd" path="/subcomponent/add" component={SubComponentAddPage}/>
                                <Route key="notFound" component={NotFoundComponent}/>
                            </Switch>
                        </RouteContainer>
                    </PoseGroup>
                </Layout>
            );
        };
    }


    public render() {
        return (
            <BrowserRouter>
                <Route render={this.renderRoute()} />
            </BrowserRouter>
        );
    }
}

export default App;