diff --git a/awx/ui_next/src/screens/Host/Hosts.jsx b/awx/ui_next/src/screens/Host/Hosts.jsx
index ed48bd8bb0..a590e2c42c 100644
--- a/awx/ui_next/src/screens/Host/Hosts.jsx
+++ b/awx/ui_next/src/screens/Host/Hosts.jsx
@@ -1,5 +1,5 @@
-import React, { Component, Fragment } from 'react';
-import { Route, withRouter, Switch } from 'react-router-dom';
+import React, { useState, useCallback } from 'react';
+import { Route, Switch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
@@ -11,70 +11,56 @@ import HostList from './HostList';
 import HostAdd from './HostAdd';
 import Host from './Host';
 
-class Hosts extends Component {
-  constructor(props) {
-    super(props);
+function Hosts({ i18n }) {
+  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
+    '/hosts': i18n._(t`Hosts`),
+    '/hosts/add': i18n._(t`Create New Host`),
+  });
 
-    const { i18n } = props;
-
-    this.state = {
-      breadcrumbConfig: {
+  const buildBreadcrumbConfig = useCallback(
+    host => {
+      if (!host) {
+        return;
+      }
+      setBreadcrumbConfig({
         '/hosts': i18n._(t`Hosts`),
         '/hosts/add': i18n._(t`Create New Host`),
-      },
-    };
-  }
+        [`/hosts/${host.id}`]: `${host.name}`,
+        [`/hosts/${host.id}/edit`]: i18n._(t`Edit Details`),
+        [`/hosts/${host.id}/details`]: i18n._(t`Details`),
+        [`/hosts/${host.id}/facts`]: i18n._(t`Facts`),
+        [`/hosts/${host.id}/groups`]: i18n._(t`Groups`),
+        [`/hosts/${host.id}/completed_jobs`]: i18n._(t`Completed Jobs`),
+      });
+    },
+    [i18n]
+  );
 
-  setBreadcrumbConfig = host => {
-    const { i18n } = this.props;
-
-    if (!host) {
-      return;
-    }
-
-    const breadcrumbConfig = {
-      '/hosts': i18n._(t`Hosts`),
-      '/hosts/add': i18n._(t`Create New Host`),
-      [`/hosts/${host.id}`]: `${host.name}`,
-      [`/hosts/${host.id}/edit`]: i18n._(t`Edit Details`),
-      [`/hosts/${host.id}/details`]: i18n._(t`Details`),
-      [`/hosts/${host.id}/facts`]: i18n._(t`Facts`),
-      [`/hosts/${host.id}/groups`]: i18n._(t`Groups`),
-      [`/hosts/${host.id}/completed_jobs`]: i18n._(t`Completed Jobs`),
-    };
-
-    this.setState({ breadcrumbConfig });
-  };
-
-  render() {
-    const { match } = this.props;
-    const { breadcrumbConfig } = this.state;
-
-    return (
-      <Fragment>
-        <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
-        <PageSection>
-          <Card>
-            <Switch>
-              <Route path={`${match.path}/add`} render={() => <HostAdd />} />
-              <Route path={`${match.path}/:id`}>
-                <Config>
-                  {({ me }) => (
-                    <Host
-                      setBreadcrumb={this.setBreadcrumbConfig}
-                      me={me || {}}
-                    />
-                  )}
-                </Config>
-              </Route>
-              <Route path={`${match.path}`} render={() => <HostList />} />
-            </Switch>
-          </Card>
-        </PageSection>
-      </Fragment>
-    );
-  }
+  return (
+    <>
+      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <PageSection>
+        <Card>
+          <Switch>
+            <Route path="/hosts/add">
+              <HostAdd />
+            </Route>
+            <Route path="/hosts/:id">
+              <Config>
+                {({ me }) => (
+                  <Host setBreadcrumb={buildBreadcrumbConfig} me={me || {}} />
+                )}
+              </Config>
+            </Route>
+            <Route path="/hosts">
+              <HostList />
+            </Route>
+          </Switch>
+        </Card>
+      </PageSection>
+    </>
+  );
 }
 
 export { Hosts as _Hosts };
-export default withI18n()(withRouter(Hosts));
+export default withI18n()(Hosts);