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>
+);

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -1,23 +1,23 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, RouteComponentProps } from 'react-router-dom';
 import loginCheckpoint from '@/api/auth/loginCheckpoint';
 import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationState } from '@/state/types';
-import useRouter from 'use-react-router';
 import { StaticContext } from 'react-router';
 import FlashMessageRender from '@/components/FlashMessageRender';
 
-export default () => {
+export default ({ history, location: { state } }: RouteComponentProps<{}, StaticContext, { token?: string }>) => {
     const [ code, setCode ] = useState('');
     const [ isLoading, setIsLoading ] = useState(false);
 
     const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
-    const { history, location: { state } } = useRouter<{}, StaticContext, { token?: string }>();
 
     if (!state || !state.token) {
-        return history.replace('/login');
+        history.replace('/login');
+
+        return null;
     }
 
     const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {

resources/scripts/components/auth/LoginContainer.tsx

@@ -1,18 +1,16 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, RouteComponentProps } from 'react-router-dom';
 import login from '@/api/auth/login';
 import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationState } from '@/state/types';
-import useRouter from 'use-react-router';
 
-export default () => {
+export default ({ history }: RouteComponentProps) => {
     const [ username, setUsername ] = useState('');
     const [ password, setPassword ] = useState('');
     const [ isLoading, setLoading ] = useState(false);
-    const { history } = useRouter();
 
     const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
 

resources/scripts/routers/AccountRouter.tsx

@@ -1,36 +1,11 @@
 import * as React from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { Route } from 'react-router-dom';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import DesignElements from '@/components/account/DesignElements';
+import TransitionRouter from '@/TransitionRouter';
 
-export default class AccountRouter extends React.PureComponent {
+export default () => (
-    render () {
+    <TransitionRouter basename={'/account'}>
-        return (
+        <Route path={'/'} component={DesignElements} exact/>
-            <BrowserRouter basename={'/account'}>
+        <Route path={'/design'} component={DesignElements} exact/>
-                <Route
+    </TransitionRouter>
-                    render={({ location }) => (
+);
-                        <TransitionGroup className={'route-transition-group'}>
-                            <CSSTransition key={location.key} timeout={150} classNames={'fade'}>
-                                <section>
-                                    <Switch location={location}>
-                                        <Route path={'/'} component={DesignElements} exact/>
-                                        <Route path={'/design'} component={DesignElements} exact/>
-                                    </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>
-        );
-    }
-}

resources/scripts/routers/AuthenticationRouter.tsx

@@ -1,42 +1,19 @@
-import * as React from 'react';
+import React from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import LoginContainer from '@/components/auth/LoginContainer';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
 import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
+import TransitionRouter from '@/TransitionRouter';
 import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
 
-export default class AuthenticationRouter extends React.PureComponent {
+export default () => (
-    render () {
+    <TransitionRouter basename={'/auth'}>
-        return (
+        <div className={'mt-32'}>
-            <BrowserRouter basename={'/auth'}>
+            <Route path={'/login'} component={LoginContainer} exact/>
-                <Route
+            <Route path={'/login/checkpoint'} component={LoginCheckpointContainer}/>
-                    render={({ location }) => (
+            <Route path={'/password'} component={ForgotPasswordContainer} exact/>
-                        <TransitionGroup className={'route-transition-group mt-32'}>
+            <Route path={'/password/reset/:token'} component={ResetPasswordContainer}/>
-                            <CSSTransition key={location.key} timeout={150} classNames={'fade'}>
+            <Route path={'/checkpoint'}/>
-                                <section>
+        </div>
-                                    <Switch location={location}>
+    </TransitionRouter>
-                                        <Route path={'/login'} component={LoginContainer} exact/>
+);
-                                        <Route path={'/login/checkpoint'} component={LoginCheckpointContainer}/>
-                                        <Route path={'/password'} component={ForgotPasswordContainer} exact/>
-                                        <Route path={'/password/reset/:token'} component={ResetPasswordContainer}/>
-                                        <Route path={'/checkpoint'}/>
-                                    </Switch>
-                                    <p className={'text-center 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>
-        );
-    }
-}