Make the transition based router be grouped more cleanly.

resources/scripts/TransitionRouter.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Route, Switch } from 'react-router';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { BrowserRouter } from 'react-router-dom';
+
+type Props = Readonly<{
+    basename: string;
+    children: React.ReactNode;
+}>;
+
+export default ({ basename, children }: Props) => (
+    <BrowserRouter basename={basename}>
+        <Route
+            render={({ location }) => (
+                <TransitionGroup className={'route-transition-group'}>
+                    <CSSTransition key={location.key} timeout={150} classNames={'fade'}>
+                        <section>
+                            <Switch location={location}>
+                                {children}
+                            </Switch>
+                            <p className={'text-right text-neutral-500 text-xs'}>
+                                &copy; 2015 - 2019&nbsp;
+                                <a
+                                    href={'https://pterodactyl.io'}
+                                    className={'no-underline text-neutral-500 hover:text-neutral-300'}
+                                >
+                                    Pterodactyl Software
+                                </a>
+                            </p>
+                        </section>
+                    </CSSTransition>
+                </TransitionGroup>
+            )}
+        />
+    </BrowserRouter>
+);