diff --git a/pkg/ui/ccl/src/routes/visualization.tsx b/pkg/ui/ccl/src/routes/visualization.tsx
index ad1549312a0f..ae94fad71714 100644
--- a/pkg/ui/ccl/src/routes/visualization.tsx
+++ b/pkg/ui/ccl/src/routes/visualization.tsx
@@ -6,20 +6,23 @@
 //
 //     https://github.com/cockroachdb/cockroach/blob/master/licenses/CCL.txt
 import React from "react";
-import { Route, IndexRedirect } from "react-router";
+import {Redirect, Route, Switch} from "react-router-dom";
 import ClusterViz from "src/views/clusterviz/containers/map";
 import NodeList from "src/views/clusterviz/containers/map/nodeList";
 import ClusterOverview from "src/views/cluster/containers/clusterOverview";
-import { normalizeConnectedComponent } from "src/util/normalizeConnectedComponent";
 
 export const CLUSTERVIZ_ROOT = "/overview/map";
 
 export default function createNodeMapRoutes(): JSX.Element {
   return (
-    <Route path="overview" component={ ClusterOverview } >
-      <IndexRedirect to="list" />
-      <Route path="list" component={ NodeList } />
-      <Route path="map(/**)" component={normalizeConnectedComponent(ClusterViz)} />
+    <Route path="/overview">
+      <ClusterOverview>
+        <Switch>
+          <Redirect exact from="/overview" to="/overview/list" />
+          <Route path="/overview/list" component={ NodeList } />
+          <Route path="/overview/map" component={ ClusterViz } />
+        </Switch>
+      </ClusterOverview>
     </Route>
   );
 }
diff --git a/pkg/ui/src/app.spec.tsx b/pkg/ui/src/app.spec.tsx
index d69c9995f2bb..7ad3606bf2cd 100644
--- a/pkg/ui/src/app.spec.tsx
+++ b/pkg/ui/src/app.spec.tsx
@@ -11,13 +11,12 @@
 import React from "react";
 import { assert } from "chai";
 import { Action, Store } from "redux";
-import { createMemoryHistory } from "react-router";
-import { syncHistoryWithStore } from "react-router-redux";
+import { createMemoryHistory } from "history";
 import { mount, ReactWrapper } from "enzyme";
 
 import "src/enzymeInit";
 import { App } from "src/app";
-import { AdminUIState, createAdminUIStore, History } from "src/redux/state";
+import { AdminUIState, createAdminUIStore } from "src/redux/state";
 
 import ClusterOverview from "src/views/cluster/containers/clusterOverview";
 import NodeList from "src/views/clusterviz/containers/map/nodeList";
@@ -54,11 +53,10 @@ import { Range } from "src/views/reports/containers/range";
 import { Stores } from "src/views/reports/containers/stores";
 
 describe("Routing to", () => {
-  const store: Store<AdminUIState, Action> = createAdminUIStore();
-  const memoryHistory = createMemoryHistory({
-    entries: ["/"],
+  const history = createMemoryHistory({
+    initialEntries: ["/"],
   });
-  const history: History = syncHistoryWithStore(memoryHistory, store);
+  const store: Store<AdminUIState, Action> = createAdminUIStore(history);
   const appWrapper: ReactWrapper = mount(<App history={history} store={store}/>);
 
   after(() => {
@@ -78,7 +76,7 @@ describe("Routing to", () => {
 
     it("redirected to '/overview'", () => {
       navigateToPath("/");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/overview/list");
     });
   });
@@ -91,7 +89,7 @@ describe("Routing to", () => {
 
     it("redirected to '/overview'", () => {
       navigateToPath("/overview");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/overview/list");
     });
   });
@@ -125,7 +123,7 @@ describe("Routing to", () => {
 
     it("redirected to '/metrics/overview/cluster'", () => {
       navigateToPath("/metrics");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/metrics/overview/cluster");
     });
   });
@@ -152,7 +150,7 @@ describe("Routing to", () => {
 
     it("redirected to '/metrics/:${dashboardNameAttr}/cluster'", () => {
       navigateToPath("/metrics/some-dashboard");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/metrics/some-dashboard/cluster");
     });
   });
@@ -172,7 +170,7 @@ describe("Routing to", () => {
 
     it("redirected to '/metrics/:${dashboardNameAttr}/cluster'", () => {
       navigateToPath("/metrics/some-dashboard/node");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/metrics/some-dashboard/cluster");
     });
   });
@@ -193,7 +191,7 @@ describe("Routing to", () => {
 
     it("redirected to '/overview/list'", () => {
       navigateToPath("/node");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/overview/list");
     });
   });
@@ -236,7 +234,7 @@ describe("Routing to", () => {
 
     it("redirected to '/databases/tables'", () => {
       navigateToPath("/databases");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/databases/tables");
     });
   });
@@ -258,7 +256,7 @@ describe("Routing to", () => {
   describe("'/databases/database/:${databaseNameAttr}/table/:${tableNameAttr}' path", () => {
     it("redirected to '/database/:${databaseNameAttr}/table/:${tableNameAttr}'", () => {
       navigateToPath("/databases/database/some-db-name/table/some-table-name");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/database/some-db-name/table/some-table-name");
     });
   });
@@ -266,7 +264,7 @@ describe("Routing to", () => {
   describe("'/database' path", () => {
     it("redirected to '/databases'", () => {
       navigateToPath("/databases/tables");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/databases/tables");
     });
   });
@@ -274,7 +272,7 @@ describe("Routing to", () => {
   describe("'/database/:${databaseNameAttr}' path", () => {
     it("redirected to '/databases'", () => {
       navigateToPath("/database/some-db-name");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/databases/tables");
     });
   });
@@ -282,7 +280,7 @@ describe("Routing to", () => {
   describe("'/database/:${databaseNameAttr}/table' path", () => {
     it("redirected to '/databases/tables'", () => {
       navigateToPath("/database/some-db-name/table");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/databases/tables");
     });
   });
@@ -334,7 +332,7 @@ describe("Routing to", () => {
   describe("'/statement' path", () => {
     it("redirected to '/statements'", () => {
       navigateToPath("/statement");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/statements");
     });
   });
@@ -394,7 +392,7 @@ describe("Routing to", () => {
 
     it("redirected to '/raft/ranges'", () => {
       navigateToPath("/raft");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/raft/ranges");
     });
   });
@@ -501,7 +499,7 @@ describe("Routing to", () => {
   describe("'/cluster' path", () => {
     it("redirected to '/metrics/overview/cluster'", () => {
       navigateToPath("/cluster");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/metrics/overview/cluster");
     });
   });
@@ -510,7 +508,7 @@ describe("Routing to", () => {
     it("redirected to '/metrics/:${dashboardNameAttr}/cluster'", () => {
       const dashboardNameAttr = "some-dashboard-name";
       navigateToPath(`/cluster/all/${dashboardNameAttr}`);
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, `/metrics/${dashboardNameAttr}/cluster`);
     });
   });
@@ -520,7 +518,7 @@ describe("Routing to", () => {
       const dashboardNameAttr = "some-dashboard-name";
       const nodeIDAttr = 1;
       navigateToPath(`/cluster/node/${nodeIDAttr}/${dashboardNameAttr}`);
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, `/metrics/${dashboardNameAttr}/node/${nodeIDAttr}`);
     });
   });
@@ -528,7 +526,7 @@ describe("Routing to", () => {
   describe("'/cluster/nodes' path", () => {
     it("redirected to '/overview/list'", () => {
       navigateToPath("/cluster/nodes");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/overview/list");
     });
   });
@@ -537,7 +535,7 @@ describe("Routing to", () => {
     it("redirected to '/node/:${nodeIDAttr}'", () => {
       const nodeIDAttr = 1;
       navigateToPath(`/cluster/nodes/${nodeIDAttr}`);
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, `/node/${nodeIDAttr}`);
     });
   });
@@ -546,7 +544,7 @@ describe("Routing to", () => {
     it("redirected to '/node/:${nodeIDAttr}/logs'", () => {
       const nodeIDAttr = 1;
       navigateToPath(`/cluster/nodes/${nodeIDAttr}/logs`);
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, `/node/${nodeIDAttr}/logs`);
     });
   });
@@ -554,7 +552,7 @@ describe("Routing to", () => {
   describe("'/cluster/events' path", () => {
     it("redirected to '/events'", () => {
       navigateToPath("/cluster/events");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/events");
     });
   });
@@ -562,7 +560,7 @@ describe("Routing to", () => {
   describe("'/cluster/nodes' path", () => {
     it("redirected to '/overview/list'", () => {
       navigateToPath("/cluster/nodes");
-      const location = history.getCurrentLocation();
+      const location = history.location;
       assert.equal(location.pathname, "/overview/list");
     });
   });
diff --git a/pkg/ui/src/app.tsx b/pkg/ui/src/app.tsx
index fa4a435f302c..8c0d76c9dfc3 100644
--- a/pkg/ui/src/app.tsx
+++ b/pkg/ui/src/app.tsx
@@ -11,20 +11,21 @@
 import React from "react";
 import { Action, Store } from "redux";
 import { Provider } from "react-redux";
-import { Router, Route, IndexRoute, IndexRedirect, Redirect } from "react-router";
+import { Route, Redirect, Switch } from "react-router-dom";
+import { History } from "history";
+import { ConnectedRouter } from "connected-react-router";
 
 import {
   tableNameAttr, databaseNameAttr, nodeIDAttr, dashboardNameAttr, rangeIDAttr, statementAttr, appAttr, implicitTxnAttr,
 } from "src/util/constants";
+import { AdminUIState } from "src/redux/state";
 
-import { AdminUIState, History } from "src/redux/state";
-
-import loginRoutes from "src/routes/login";
+import { createLoginRoute, createLogoutRoute } from "src/routes/login";
 import visualizationRoutes from "src/routes/visualization";
 
 import NotFound from "src/views/app/components/NotFound";
-import Layout from "src/views/app/containers/layout";
-import { ConnectedDatabaseTablesList, ConnectedDatabaseGrantsList } from "src/views/databases/containers/databases";
+import { Layout } from "src/views/app/containers/layout";
+import { DatabaseGrantsList, DatabaseTablesList } from "src/views/databases/containers/databases";
 import TableDetails from "src/views/databases/containers/tableDetails";
 import { EventPage } from "src/views/cluster/containers/events";
 import DataDistributionPage from "src/views/cluster/containers/dataDistribution";
@@ -49,8 +50,6 @@ import Settings from "src/views/reports/containers/settings";
 import Stores from "src/views/reports/containers/stores";
 import StatementsPage from "src/views/statements/statementsPage";
 import StatementDetails from "src/views/statements/statementDetails";
-import { normalizeConnectedComponent } from "src/util/normalizeConnectedComponent";
-import { ConnectedDecommissionedNodeHistory } from "src/views/reports";
 
 import "nvd3/build/nv.d3.min.css";
 import "react-select/dist/react-select.css";
@@ -78,140 +77,112 @@ export const App: React.FC<AppProps> = (props: AppProps) => {
 
   return (
     <Provider store={store}>
-      <Router history={history}>
-        { /* login */}
-        {loginRoutes(store)}
-
-        <Route path="/" component={normalizeConnectedComponent(Layout)}>
-          <IndexRedirect to="overview"/>
-
-          { /* overview page */}
-          {visualizationRoutes()}
-
-          { /* time series metrics */}
-          <Route path="metrics">
-            <IndexRedirect to="overview/cluster"/>
-            <Route path={`:${dashboardNameAttr}`}>
-              <IndexRedirect to="cluster"/>
-              <Route path="cluster" component={normalizeConnectedComponent(NodeGraphs)}/>
-              <Route path="node">
-                <IndexRedirect to={`/metrics/:${dashboardNameAttr}/cluster`}/>
-                <Route path={`:${nodeIDAttr}`} component={normalizeConnectedComponent(NodeGraphs)}/>
-              </Route>
-            </Route>
-          </Route>
-
-          { /* node details */}
-          <Route path="node">
-            <IndexRedirect to="/overview/list"/>
-            <Route path={`:${nodeIDAttr}`}>
-              <IndexRoute component={normalizeConnectedComponent(NodeOverview)}/>
-              <Route path="logs" component={normalizeConnectedComponent(NodeLogs)}/>
-            </Route>
-          </Route>
-
-          { /* events & jobs */}
-          <Route path="events" component={normalizeConnectedComponent(EventPage)}/>
-          <Route path="jobs" component={normalizeConnectedComponent(JobsPage)}/>
-
-          { /* databases */}
-          <Route path="databases">
-            <IndexRedirect to="tables"/>
-            <Route path="tables" component={normalizeConnectedComponent(ConnectedDatabaseTablesList)}/>
-            <Route path="grants" component={normalizeConnectedComponent(ConnectedDatabaseGrantsList)}/>
-            <Redirect
-              from={`database/:${databaseNameAttr}/table/:${tableNameAttr}`}
-              to={`/database/:${databaseNameAttr}/table/:${tableNameAttr}`}
-            />
-          </Route>
-          <Route path="database">
-            <IndexRedirect to="/databases"/>
-            <Route path={`:${databaseNameAttr}`}>
-              <IndexRedirect to="/databases"/>
-              <Route path="table">
-                <IndexRedirect to="/databases"/>
-                <Route path={`:${tableNameAttr}`} component={normalizeConnectedComponent(TableDetails)}/>
-              </Route>
-            </Route>
-          </Route>
-
-          { /* data distribution */}
-          <Route path="data-distribution" component={normalizeConnectedComponent(DataDistributionPage)}/>
-
-          { /* statement statistics */}
-          <Route path="statements">
-            <IndexRoute component={normalizeConnectedComponent(StatementsPage)}/>
-            <Route path={`:${appAttr}`} component={normalizeConnectedComponent(StatementsPage)}/>
-            <Route path={`:${appAttr}/:${statementAttr}`} component={normalizeConnectedComponent(StatementDetails)}/>
-            <Route path={`:${appAttr}/:${implicitTxnAttr}/:${statementAttr}`}
-                   component={normalizeConnectedComponent(StatementDetails)}/>
-          </Route>
-          <Route path="statement">
-            <IndexRedirect to="/statements"/>
-            <Route path={`:${statementAttr}`} component={normalizeConnectedComponent(StatementDetails)}/>
-            <Route path={`:${implicitTxnAttr}/:${statementAttr}`}
-                   component={normalizeConnectedComponent(StatementDetails)}/>
-          </Route>
-
-          { /* debug pages */}
-          <Route path="debug">
-            <IndexRoute component={Debug}/>
-            <Route path="redux" component={normalizeConnectedComponent(ReduxDebug)}/>
-            <Route path="chart" component={normalizeConnectedComponent(CustomChart)}/>
-            <Route path="enqueue_range" component={normalizeConnectedComponent(EnqueueRange)}/>
-          </Route>
-          <Route path="raft" component={Raft}>
-            <IndexRedirect to="ranges"/>
-            <Route path="ranges" component={normalizeConnectedComponent(RaftRanges)}/>
-            <Route path="messages/all" component={normalizeConnectedComponent(RaftMessages)}/>
-            <Route path={`messages/node/:${nodeIDAttr}`} component={normalizeConnectedComponent(RaftMessages)}/>
-          </Route>
-          <Route path="reports">
-            <Route path="problemranges" component={normalizeConnectedComponent(ProblemRanges)}>
-              <Route path={`:${nodeIDAttr}`} component={normalizeConnectedComponent(ProblemRanges)}/>
-            </Route>
-            <Route path="localities" component={normalizeConnectedComponent(Localities)}/>
-            <Route path="nodes">
-              <IndexRoute component={ normalizeConnectedComponent(Nodes) } />
-              <Route path="history" component={ normalizeConnectedComponent(ConnectedDecommissionedNodeHistory) } />
-            </Route>
-            <Route path="network" component={ normalizeConnectedComponent(Network) }>
-              <Route path={`:${nodeIDAttr}`} component={ normalizeConnectedComponent(Network) } />
-            </Route>
-            <Route path="settings" component={normalizeConnectedComponent(Settings)}/>
-            <Route path={`certificates/:${nodeIDAttr}`} component={normalizeConnectedComponent(Certificates)}/>
-            <Route path={`range/:${rangeIDAttr}`} component={normalizeConnectedComponent(Range)}/>
-            <Route path={`stores/:${nodeIDAttr}`} component={normalizeConnectedComponent(Stores)}/>
-          </Route>
-
-          { /* old route redirects */}
-          <Route path="cluster">
-            <IndexRedirect to="/metrics/overview/cluster"/>
-            <Redirect
-              from={`all/:${dashboardNameAttr}`}
-              to={`/metrics/:${dashboardNameAttr}/cluster`}
-            />
-            <Redirect
-              from={`node/:${nodeIDAttr}/:${dashboardNameAttr}`}
-              to={`/metrics/:${dashboardNameAttr}/node/:${nodeIDAttr}`}
-            />
-            <Route path="nodes">
-              <IndexRedirect to="/overview/list"/>
-              <Route path={`:${nodeIDAttr}`}>
-                <IndexRedirect to={`/node/:${nodeIDAttr}`}/>
-                <Redirect from="logs" to={`/node/:${nodeIDAttr}/logs`}/>
-              </Route>
+      <ConnectedRouter history={history}>
+          <Switch>
+            { /* login */}
+            { createLoginRoute() }
+            { createLogoutRoute(store) }
+            <Route path="/">
+              <Layout>
+                <Switch>
+                  <Redirect exact from="/" to="/overview" />
+                  { /* overview page */ }
+                  { visualizationRoutes() }
+
+                  { /* time series metrics */ }
+                  <Redirect exact from="/metrics" to="/metrics/overview/cluster" />
+                  <Redirect exact from={`/metrics/:${dashboardNameAttr}`} to={`/metrics/:${dashboardNameAttr}/cluster`} />
+                  <Route exact path={`/metrics/:${dashboardNameAttr}/cluster`} component={ NodeGraphs } />
+                  <Redirect exact path={`/metrics/:${dashboardNameAttr}/node`} to={ `/metrics/:${dashboardNameAttr}/cluster` } />
+                  <Route path={ `/metrics/:${dashboardNameAttr}/node/:${nodeIDAttr}` } component={ NodeGraphs } />
+
+                  { /* node details */ }
+                  <Redirect exact from="/node" to="/overview/list" />
+                  <Route exact path={ `/node/:${nodeIDAttr}` } component={ NodeOverview } />
+                  <Route path={ `/node/:${nodeIDAttr}/logs` } component={ NodeLogs } />
+
+                  { /* events & jobs */ }
+                  <Route path="/events" component={ EventPage } />
+                  <Route path="/jobs" component={ JobsPage } />
+
+                  { /* databases */ }
+                  <Redirect exact from="/databases" to="/databases/tables" />
+                  <Route path="/databases/tables" component={ DatabaseTablesList } />
+                  <Route path="/databases/grants" component={ DatabaseGrantsList } />
+                  <Redirect
+                    from={ `/databases/database/:${databaseNameAttr}/table/:${tableNameAttr}` }
+                    to={ `/database/:${databaseNameAttr}/table/:${tableNameAttr}` }
+                  />
+
+                  <Redirect exact from="/database" to="/databases" />
+                  <Redirect exact from={ `/database/:${databaseNameAttr}`} to="/databases" />
+                  <Redirect exact from={ `/database/:${databaseNameAttr}/table`} to="/databases" />
+                  <Route path={ `/database/:${databaseNameAttr}/table/:${tableNameAttr}` } component={ TableDetails } />
+
+                  { /* data distribution */ }
+                  <Route path="/data-distribution" component={ DataDistributionPage } />
+
+                  { /* statement statistics */ }
+                  <Route exact path="/statements" component={ StatementsPage }/>
+                  <Route exact path={ `/statements/:${appAttr}`} component={ StatementsPage } />
+                  <Route exact path={ `/statements/:${appAttr}/:${statementAttr}` } component={ StatementDetails } />
+                  <Route exact path={ `/statements/:${appAttr}/:${implicitTxnAttr}/:${statementAttr}` } component={ StatementDetails } />
+
+                  <Route exact path="/statement" component={() => <Redirect to="/statements" />}/>
+                  <Route exact path={`/statement/:${statementAttr}`} component={StatementDetails}/>
+                  <Route exact path={`/statement/:${implicitTxnAttr}/:${statementAttr}`} component={StatementDetails}/>
+
+                  { /* debug pages */ }
+                  <Route exact path="/debug" component={Debug}/>
+                  <Route path="/debug/redux" component={ReduxDebug}/>
+                  <Route path="/debug/chart" component={CustomChart}/>
+                  <Route path="/debug/enqueue_range" component={EnqueueRange}/>
+
+                  <Route path="/raft">
+                    <Raft>
+                      <Switch>
+                        <Redirect exact from="/raft" to="/raft/ranges" />
+                        <Route path="/raft/ranges" component={RaftRanges}/>
+                        <Route path="/raft/messages/all" component={RaftMessages}/>
+                        <Route path={`/raft/messages/node/:${nodeIDAttr}`} component={RaftMessages}/>
+                      </Switch>
+                    </Raft>
+                  </Route>
+
+                  <Route path="/reports/problemranges" component={ ProblemRanges } />
+                  <Route path={`/reports/problemranges/:${nodeIDAttr}`} component={ ProblemRanges }/>
+                  <Route path="/reports/localities" component={ Localities } />
+                  <Route path="/reports/network" component={ Network } />
+                  <Route path="/reports/nodes" component={ Nodes } />
+                  <Route path="/reports/settings" component={ Settings } />
+                  <Route path={`/reports/certificates/:${nodeIDAttr}`} component={ Certificates } />
+                  <Route path={`/reports/range/:${rangeIDAttr}`} component={ Range } />
+                  <Route path={`/reports/stores/:${nodeIDAttr}`} component={ Stores } />
+
+                  { /* old route redirects */ }
+                  <Redirect exact from="/cluster" to="/metrics/overview/cluster" />
+                  <Redirect
+                    from={`/cluster/all/:${dashboardNameAttr}`}
+                    to={`/metrics/:${dashboardNameAttr}/cluster`}
+                  />
+                  <Redirect
+                    from={`/cluster/node/:${nodeIDAttr}/:${dashboardNameAttr}`}
+                    to={`/metrics/:${dashboardNameAttr}/node/:${nodeIDAttr}`}
+                  />
+                  <Redirect exact from="/cluster/nodes" to="/overview/list" />
+                  <Redirect exact from={`/cluster/nodes/:${nodeIDAttr}`} to={`/node/:${nodeIDAttr}`} />
+                  <Redirect from={`/cluster/nodes/:${nodeIDAttr}/logs`} to={`/node/:${nodeIDAttr}/logs`}/>
+                  <Redirect from="/cluster/events" to="/events"/>
+
+                  <Redirect exact from="/nodes" to="/overview/list" />
+
+                  { /* 404 */ }
+                  <Route path="*" component={ NotFound } />
+                </Switch>
+              </Layout>
             </Route>
-            <Redirect from="events" to="/events"/>
-          </Route>
-          <Route path="nodes">
-            <IndexRedirect to="/overview/list"/>
-          </Route>
-
-          { /* 404 */}
-          <Route path="*" component={NotFound}/>
-        </Route>
-      </Router>
+          </Switch>
+      </ConnectedRouter>
     </Provider>
   );
 };
diff --git a/pkg/ui/src/routes/login.tsx b/pkg/ui/src/routes/login.tsx
index 9f7f84db01fb..03e98bac9076 100644
--- a/pkg/ui/src/routes/login.tsx
+++ b/pkg/ui/src/routes/login.tsx
@@ -8,33 +8,34 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import React, { Fragment } from "react";
-import { Route } from "react-router";
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
 import { Store } from "redux";
 
 import { doLogout, selectLoginState } from "src/redux/login";
 import { AdminUIState } from "src/redux/state";
 import LoginPage from "src/views/login/loginPage";
-import {normalizeConnectedComponent} from "src/util/normalizeConnectedComponent";
 
 export const LOGIN_PAGE = "/login";
 export const LOGOUT_PAGE = "/logout";
 
-export default function createLoginRoutes(store: Store<AdminUIState>): JSX.Element {
-  function handleLogout(_nextState: any, replace: (route: string) => {}) {
-    const loginState = selectLoginState(store.getState());
+// tslint:disable-next-line:variable-name
+export function createLoginRoute() {
+  return (
+    <Route exact path={LOGIN_PAGE} component={ LoginPage } />
+  );
+}
 
-    if (!loginState.loggedInUser()) {
-      return replace(LOGIN_PAGE);
-    }
+export function createLogoutRoute(store: Store<AdminUIState>): JSX.Element {
+  return (
+    <Route exact path={LOGOUT_PAGE} render={() => {
+      const loginState = selectLoginState(store.getState());
 
-    store.dispatch(doLogout());
-  }
+      if (!loginState.loggedInUser()) {
+        return <Redirect to={LOGIN_PAGE} />;
+      }
 
-  return (
-    <Fragment>
-      <Route path={LOGIN_PAGE} component={normalizeConnectedComponent(LoginPage)} />
-      <Route path={LOGOUT_PAGE} onEnter={ handleLogout } />
-    </Fragment>
+      store.dispatch(doLogout());
+    }} />
   );
 }
diff --git a/pkg/ui/src/routes/visualization.tsx b/pkg/ui/src/routes/visualization.tsx
index 501b4690a3f3..35a749c23172 100644
--- a/pkg/ui/src/routes/visualization.tsx
+++ b/pkg/ui/src/routes/visualization.tsx
@@ -9,7 +9,7 @@
 // licenses/APL.txt.
 
 import React from "react";
-import { Route, IndexRedirect } from "react-router";
+import { Route, Switch, Redirect } from "react-router-dom";
 
 import { NodesOverview } from "src/views/cluster/containers/nodesOverview";
 import ClusterOverview from "src/views/cluster/containers/clusterOverview";
@@ -32,8 +32,10 @@ class NodesWrapper extends React.Component<{}, {}> {
 export default function createClusterOverviewRoutes(): JSX.Element {
   return (
     <Route path="overview" component={ ClusterOverview } >
-      <IndexRedirect to="list" />
-      <Route path="list" component={ NodesWrapper } />
+      <Switch>
+        <Route exact path="/" component={() => <Redirect to="list" />}/>
+        <Route path="list" component={ NodesWrapper } />
+      </Switch>
     </Route>
   );
 }