diff --git a/awx/ui_next/src/screens/User/Users.jsx b/awx/ui_next/src/screens/User/Users.jsx
index 238bda2016..bf74439ac5 100644
--- a/awx/ui_next/src/screens/User/Users.jsx
+++ b/awx/ui_next/src/screens/User/Users.jsx
@@ -1,5 +1,5 @@
-import React, { Component, Fragment } from 'react';
-import { Route, withRouter, Switch } from 'react-router-dom';
+import React, { Fragment, useState } from 'react';
+import { Route, useRouteMatch, Switch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
@@ -10,28 +10,19 @@ import UsersList from './UserList/UserList';
 import UserAdd from './UserAdd/UserAdd';
 import User from './User';
 
-class Users extends Component {
-  constructor(props) {
-    super(props);
-
-    const { i18n } = props;
-
-    this.state = {
-      breadcrumbConfig: {
-        '/users': i18n._(t`Users`),
-        '/users/add': i18n._(t`Create New User`),
-      },
-    };
-  }
-
-  setBreadcrumbConfig = user => {
-    const { i18n } = this.props;
+function Users({ i18n }) {
+  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
+    '/users': i18n._(t`Users`),
+    '/users/add': i18n._(t`Create New User`),
+  });
+  const match = useRouteMatch();
 
+  const addUserBreadcrumb = user => {
     if (!user) {
       return;
     }
 
-    const breadcrumbConfig = {
+    setBreadcrumbConfig({
       '/users': i18n._(t`Users`),
       '/users/add': i18n._(t`Create New User`),
       [`/users/${user.id}`]: `${user.username}`,
@@ -41,42 +32,30 @@ class Users extends Component {
       [`/users/${user.id}/teams`]: i18n._(t`Teams`),
       [`/users/${user.id}/organizations`]: i18n._(t`Organizations`),
       [`/users/${user.id}/tokens`]: i18n._(t`Tokens`),
-    };
-
-    this.setState({ breadcrumbConfig });
+    });
   };
 
-  render() {
-    const { match, history, location } = this.props;
-    const { breadcrumbConfig } = this.state;
-
-    return (
-      <Fragment>
-        <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
-        <Switch>
-          <Route path={`${match.path}/add`}>
-            <UserAdd />
-          </Route>
-          <Route path={`${match.path}/:id`}>
-            <Config>
-              {({ me }) => (
-                <User
-                  history={history}
-                  location={location}
-                  setBreadcrumb={this.setBreadcrumbConfig}
-                  me={me || {}}
-                />
-              )}
-            </Config>
-          </Route>
-          <Route path={`${match.path}`}>
-            <UsersList />
-          </Route>
-        </Switch>
-      </Fragment>
-    );
-  }
+  return (
+    <Fragment>
+      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <Switch>
+        <Route path={`${match.path}/add`}>
+          <UserAdd />
+        </Route>
+        <Route path={`${match.path}/:id`}>
+          <Config>
+            {({ me }) => (
+              <User setBreadcrumb={addUserBreadcrumb} me={me || {}} />
+            )}
+          </Config>
+        </Route>
+        <Route path={`${match.path}`}>
+          <UsersList />
+        </Route>
+      </Switch>
+    </Fragment>
+  );
 }
 
 export { Users as _Users };
-export default withI18n()(withRouter(Users));
+export default withI18n()(Users);