diff --git a/__tests__/components/ConditionalRedirect.test.jsx b/__tests__/components/ConditionalRedirect.test.jsx
deleted file mode 100644
index c437ae6971..0000000000
--- a/__tests__/components/ConditionalRedirect.test.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import {
-  Route,
-  Redirect
-} from 'react-router-dom';
-import { shallow } from 'enzyme';
-import ConditionalRedirect from '../../src/components/ConditionalRedirect';
-
-describe('<ConditionalRedirect />', () => {
-  test('renders Redirect when shouldRedirect is passed truthy func', () => {
-    const truthyFunc = () => true;
-    const shouldHaveRedirectChild = shallow(
-      <ConditionalRedirect
-        shouldRedirect={() => truthyFunc()}
-      />
-    );
-    const redirectChild = shouldHaveRedirectChild.find(Redirect);
-    expect(redirectChild.length).toBe(1);
-    const routeChild = shouldHaveRedirectChild.find(Route);
-    expect(routeChild.length).toBe(0);
-  });
-
-  test('renders Route when shouldRedirect is passed falsy func', () => {
-    const falsyFunc = () => false;
-    const shouldHaveRouteChild = shallow(
-      <ConditionalRedirect
-        shouldRedirect={() => falsyFunc()}
-      />
-    );
-    const routeChild = shouldHaveRouteChild.find(Route);
-    expect(routeChild.length).toBe(1);
-    const redirectChild = shouldHaveRouteChild.find(Redirect);
-    expect(redirectChild.length).toBe(0);
-  });
-});
diff --git a/src/App.jsx b/src/App.jsx
index 0fd573d650..c03ecbcb06 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,7 +5,8 @@ import {
   HashRouter as Router,
   Redirect,
   Switch,
-  withRouter
+  withRouter,
+  Route,
 } from 'react-router-dom';
 import {
   BackgroundImage,
@@ -28,12 +29,10 @@ import { API_LOGOUT, API_CONFIG } from './endpoints';
 
 import ja from '../build/locales/ja/messages';
 import en from '../build/locales/en/messages';
-
 import Login from './pages/Login';
 import HelpDropdown from './components/HelpDropdown';
 import LogoutButton from './components/LogoutButton';
 import TowerLogo from './components/TowerLogo';
-import ConditionalRedirect from './components/ConditionalRedirect';
 import NavExpandableGroup from './components/NavExpandableGroup';
 
 const catalogs = { en, ja };
@@ -61,6 +60,7 @@ class App extends React.Component {
   constructor(props) {
     super(props);
 
+    // initialize with a closed navbar if window size is small
     const isNavOpen = typeof window !== 'undefined'
       && window.innerWidth >= parseInt(breakpointMd.value, 10);
 
@@ -95,10 +95,9 @@ class App extends React.Component {
   }
 
   render () {
-    const { isNavOpen } = this.state;
-    const { logo, loginInfo, history, routeConfig = [] } = this.props;
+    const { config, isNavOpen } = this.state;
     // extract a flattened array of all routes from the provided route config
-    const allRoutes = routeConfig.reduce((flattened, { routes }) => flattened.concat(routes), []);
+    const { logo, loginInfo, routeGroups = [] } = this.props;
 
     return (
       <Router>
@@ -108,82 +107,80 @@ class App extends React.Component {
         >
           <I18n>
             {({ i18n }) => (
-              <Fragment>
-                <ConfigContext.Provider>
-                  <BackgroundImage src={backgroundConfig} />
+              api.isAuthenticated () ? (
+                <ConfigContext.Provider value={config}>
                   <Switch>
-                    <ConditionalRedirect
-                      shouldRedirect={() => api.isAuthenticated()}
-                      redirectPath="/"
-                      path="/login"
-                      component={() => <Login logo={logo} loginInfo={loginInfo} />}
-                    />
-                    <Fragment>
-                      <Page
-                        usecondensed="True"
-                        header={(
-                          <PageHeader
-                            logo={<TowerLogo onClick={this.onLogoClick} />}
-                            toolbar={(
-                              <Toolbar>
-                                <ToolbarGroup>
-                                  <ToolbarItem>
-                                    <HelpDropdown />
-                                  </ToolbarItem>
-                                  <ToolbarItem>
-                                    <LogoutButton onDevLogout={() => this.onDevLogout()} />
-                                  </ToolbarItem>
-                                </ToolbarGroup>
-                              </Toolbar>
-                            )}
-                            showNavToggle
-                            onNavToggle={this.onNavToggle}
-                          />
-                        )}
-                        sidebar={(
-                          <PageSidebar
-                            isNavOpen={isNavOpen}
-                            nav={(
-                              <Nav aria-label={i18n._("Primary Navigation")}>
-                                <NavList>
-                                  { routeConfig.map(({ groupId, routes, title }) => (
-                                    <NavExpandableGroup
-                                      key={groupId}
-                                      groupId={groupId}
-                                      title={i18n._(title)}
-                                      routes={routes.map(route => ({
-                                        path: route.path,
-                                        component: route.component,
-                                        title: i18n._(route.title)
-                                      }))}
-                                    />
-                                  ))}
-                                </NavList>
-                              </Nav>
-                            )}
-                          />
-                        )}
-                      >
-                        <ConditionalRedirect
-                          shouldRedirect={() => !api.isAuthenticated()}
-                          redirectPath="/login"
-                          exact path="/"
-                          component={() => (<Redirect to="/home" />)}
-                        />
-                        { allRoutes.map(({ component, path }) => (
-                          <ConditionalRedirect
-                            key={path}
-                            path={path}
-                            redirectPath="/login"
-                            shouldRedirect={() => !api.isAuthenticated()}
-                            component={component}
-                          />
-                        ))}
-                      </Page>
-                    </Fragment>
+                    <Route path="/login" render={() => <Redirect to='/home' />} />
+                    <Route exact path="/" render={() => <Redirect to='/home' />} />
+                    <Route render={() => (
+                      <Fragment>
+                        <BackgroundImage src={backgroundConfig} />
+                        <Page
+                          usecondensed="True"
+                          header={(
+                            <PageHeader
+                              showNavToggle
+                              onNavToggle={() => this.onNavToggle()}
+                              logo={(
+                                <TowerLogo
+                                  onClick={this.onLogoClick}
+                                />
+                              )}
+                              toolbar={(
+                                <Toolbar>
+                                  <ToolbarGroup>
+                                    <ToolbarItem>
+                                      <HelpDropdown />
+                                    </ToolbarItem>
+                                    <ToolbarItem>
+                                      <LogoutButton
+                                        onDevLogout={() => this.onDevLogout()}
+                                      />
+                                    </ToolbarItem>
+                                  </ToolbarGroup>
+                                </Toolbar>
+                              )}
+                            />
+                          )}
+                          sidebar={(
+                            <PageSidebar
+                              isNavOpen={isNavOpen}
+                              nav={(
+                                <Nav aria-label={i18n._("Primary Navigation")}>
+                                  <NavList>
+                                  {
+                                    routeGroups.map(params => <NavExpandableGroup key={params.groupId} {...params} />)
+                                  }
+                                  </NavList>
+                                </Nav>
+                              )}
+                            />
+                          )}
+                        >
+                        {
+                          //
+                          // Extract a flattened array of all route params from the provided route groups
+                          // and use it to create the route components.
+                          //
+                          // [{ routes }, { routes }] -> [route, route, route] -> (<Route/><Route/><Route/>)
+                          //
+                          routeGroups
+                            .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
+                            .map(({ component: Component, path }) => (
+                              <Route key={path} path={path} render={params => <Component {...params } />} />
+                            ))
+                        }
+                        </Page>
+                      </Fragment>
+                    )} />
                   </Switch>
                 </ConfigContext.Provider>
-              </Fragment>
+              ) : (
+                <Switch>
+                  <Route path="/login" render={() => <Login logo={logo} loginInfo={loginInfo} />} />
+                  <Redirect to="/login" />
+                </Switch>
+              )
             )}
           </I18n>
         </I18nProvider>
diff --git a/src/components/ConditionalRedirect.jsx b/src/components/ConditionalRedirect.jsx
deleted file mode 100644
index 7a2112326e..0000000000
--- a/src/components/ConditionalRedirect.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import {
-  Route,
-  Redirect
-} from 'react-router-dom';
-
-const ConditionalRedirect = ({
-  component: Component,
-  shouldRedirect,
-  redirectPath,
-  location,
-  ...props
-}) => (shouldRedirect() ? (
-  <Redirect to={{
-    pathname: redirectPath,
-    state: { from: location }
-  }}
-  />
-) : (
-  <Route {...props} render={rest => (<Component {...rest} />)} />
-));
-
-export default ConditionalRedirect;