diff --git a/awx/ui_next/src/screens/Host/HostGroups/HostGroups.jsx b/awx/ui_next/src/screens/Host/HostGroups/HostGroups.jsx
index dca2320b88..ec4fe08ceb 100644
--- a/awx/ui_next/src/screens/Host/HostGroups/HostGroups.jsx
+++ b/awx/ui_next/src/screens/Host/HostGroups/HostGroups.jsx
@@ -1,20 +1,18 @@
 import React from 'react';
 import { withI18n } from '@lingui/react';
 
-import { Switch, Route, withRouter } from 'react-router-dom';
+import { Switch, Route } from 'react-router-dom';
 
 import HostGroupsList from './HostGroupsList';
 
-function HostGroups({ location, match, host }) {
+function HostGroups({ host }) {
   return (
     <Switch>
       <Route
         key="list"
         path="/hosts/:id/groups"
         render={() => {
-          return (
-            <HostGroupsList host={host} location={location} match={match} />
-          );
+          return <HostGroupsList host={host} />;
         }}
       />
     </Switch>
@@ -22,4 +20,4 @@ function HostGroups({ location, match, host }) {
 }
 
 export { HostGroups as _HostGroups };
-export default withI18n()(withRouter(HostGroups));
+export default withI18n()(HostGroups);
diff --git a/awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx b/awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx
index 22c2901358..aa813b24a3 100644
--- a/awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx
+++ b/awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { getQSConfig, parseQueryString, mergeParams } from '@util/qs';
@@ -25,10 +25,11 @@ const QS_CONFIG = getQSConfig('group', {
   order_by: 'name',
 });
 
-function HostGroupsList({ i18n, location, match, host }) {
+function HostGroupsList({ i18n, host }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const hostId = match.params.id;
+  const { id: hostId } = useParams();
+  const { search } = useLocation();
   const invId = host.summary_fields.inventory.id;
 
   const {
@@ -38,7 +39,7 @@ function HostGroupsList({ i18n, location, match, host }) {
     request: fetchGroups,
   } = useRequest(
     useCallback(async () => {
-      const params = parseQueryString(QS_CONFIG, location.search);
+      const params = parseQueryString(QS_CONFIG, search);
 
       const [
         {
@@ -55,7 +56,7 @@ function HostGroupsList({ i18n, location, match, host }) {
         itemCount: count,
         actions: actionsResponse.data.actions,
       };
-    }, [hostId, location]), // eslint-disable-line react-hooks/exhaustive-deps
+    }, [hostId, search]),
     {
       groups: [],
       itemCount: 0,
@@ -228,4 +229,4 @@ function HostGroupsList({ i18n, location, match, host }) {
     </>
   );
 }
-export default withI18n()(withRouter(HostGroupsList));
+export default withI18n()(HostGroupsList);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroups.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroups.jsx
index 2917f3f96d..5b8ecdbbbb 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroups.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroups.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { withI18n } from '@lingui/react';
 
-import { Switch, Route, withRouter } from 'react-router-dom';
+import { Switch, Route } from 'react-router-dom';
 
 import InventoryGroupAdd from '../InventoryGroupAdd/InventoryGroupAdd';
 
 import InventoryGroup from '../InventoryGroup/InventoryGroup';
 import InventoryGroupsList from './InventoryGroupsList';
 
-function InventoryGroups({ setBreadcrumb, inventory, location, match }) {
+function InventoryGroups({ setBreadcrumb, inventory }) {
   return (
     <Switch>
       <Route
@@ -34,7 +34,7 @@ function InventoryGroups({ setBreadcrumb, inventory, location, match }) {
         key="list"
         path="/inventories/inventory/:id/groups"
         render={() => {
-          return <InventoryGroupsList location={location} match={match} />;
+          return <InventoryGroupsList />;
         }}
       />
     </Switch>
@@ -42,4 +42,4 @@ function InventoryGroups({ setBreadcrumb, inventory, location, match }) {
 }
 
 export { InventoryGroups as _InventoryGroups };
-export default withI18n()(withRouter(InventoryGroups));
+export default withI18n()(InventoryGroups);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
index f18f6ade7b..92576a9573 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { getQSConfig, parseQueryString } from '@util/qs';
@@ -37,7 +37,7 @@ const useModal = () => {
   };
 };
 
-function InventoryGroupsList({ i18n, location, match }) {
+function InventoryGroupsList({ i18n }) {
   const [actions, setActions] = useState(null);
   const [contentError, setContentError] = useState(null);
   const [deletionError, setDeletionError] = useState(null);
@@ -47,7 +47,8 @@ function InventoryGroupsList({ i18n, location, match }) {
   const [selected, setSelected] = useState([]);
   const { isModalOpen, toggleModal } = useModal();
 
-  const inventoryId = match.params.id;
+  const { id: inventoryId } = useParams();
+  const { search } = useLocation();
   const fetchGroups = (id, queryString) => {
     const params = parseQueryString(QS_CONFIG, queryString);
     return InventoriesAPI.readGroups(id, params);
@@ -64,7 +65,7 @@ function InventoryGroupsList({ i18n, location, match }) {
             data: { actions: optionActions },
           },
         ] = await Promise.all([
-          fetchGroups(inventoryId, location.search),
+          fetchGroups(inventoryId, search),
           InventoriesAPI.readGroupsOptions(inventoryId),
         ]);
 
@@ -78,7 +79,7 @@ function InventoryGroupsList({ i18n, location, match }) {
       }
     }
     fetchData();
-  }, [inventoryId, location]);
+  }, [inventoryId, search]);
 
   const handleSelectAll = isSelected => {
     setSelected(isSelected ? [...groups] : []);
@@ -138,7 +139,7 @@ function InventoryGroupsList({ i18n, location, match }) {
     try {
       const {
         data: { count, results },
-      } = await fetchGroups(inventoryId, location.search);
+      } = await fetchGroups(inventoryId, search);
       setGroups(results);
       setGroupCount(count);
     } catch (error) {
@@ -263,4 +264,4 @@ function InventoryGroupsList({ i18n, location, match }) {
     </>
   );
 }
-export default withI18n()(withRouter(InventoryGroupsList));
+export default withI18n()(InventoryGroupsList);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroups.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroups.jsx
index 4f73cb36a3..ef90103734 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroups.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroups.jsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import { withI18n } from '@lingui/react';
 
-import { Switch, Route, withRouter } from 'react-router-dom';
+import { Switch, Route } from 'react-router-dom';
 
 import InventoryHostGroupsList from './InventoryHostGroupsList';
 
-function InventoryHostGroups({ location, match }) {
+function InventoryHostGroups() {
   return (
     <Switch>
       <Route
         key="list"
         path="/inventories/inventory/:id/hosts/:hostId/groups"
         render={() => {
-          return <InventoryHostGroupsList location={location} match={match} />;
+          return <InventoryHostGroupsList />;
         }}
       />
     </Switch>
@@ -20,4 +20,4 @@ function InventoryHostGroups({ location, match }) {
 }
 
 export { InventoryHostGroups as _InventoryHostGroups };
-export default withI18n()(withRouter(InventoryHostGroups));
+export default withI18n()(InventoryHostGroups);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx
index 04441c5070..f4c8212e1e 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { getQSConfig, parseQueryString, mergeParams } from '@util/qs';
@@ -25,10 +25,10 @@ const QS_CONFIG = getQSConfig('group', {
   order_by: 'name',
 });
 
-function InventoryHostGroupsList({ i18n, location, match }) {
+function InventoryHostGroupsList({ i18n }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const { hostId, id: invId } = match.params;
+  const { hostId, id: invId } = useParams();
+  const { search } = useLocation();
 
   const {
     result: { groups, itemCount, actions },
@@ -37,7 +37,7 @@ function InventoryHostGroupsList({ i18n, location, match }) {
     request: fetchGroups,
   } = useRequest(
     useCallback(async () => {
-      const params = parseQueryString(QS_CONFIG, location.search);
+      const params = parseQueryString(QS_CONFIG, search);
 
       const [
         {
@@ -54,7 +54,7 @@ function InventoryHostGroupsList({ i18n, location, match }) {
         itemCount: count,
         actions: actionsResponse.data.actions,
       };
-    }, [hostId, location]), // eslint-disable-line react-hooks/exhaustive-deps
+    }, [hostId, search]), // eslint-disable-line react-hooks/exhaustive-deps
     {
       groups: [],
       itemCount: 0,
@@ -226,4 +226,4 @@ function InventoryHostGroupsList({ i18n, location, match }) {
     </>
   );
 }
-export default withI18n()(withRouter(InventoryHostGroupsList));
+export default withI18n()(InventoryHostGroupsList);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
index fdf368e39d..3b82d513a5 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { getQSConfig, parseQueryString } from '@util/qs';
@@ -20,7 +20,7 @@ const QS_CONFIG = getQSConfig('host', {
   order_by: 'name',
 });
 
-function InventoryHostList({ i18n, location, match }) {
+function InventoryHostList({ i18n }) {
   const [actions, setActions] = useState(null);
   const [contentError, setContentError] = useState(null);
   const [deletionError, setDeletionError] = useState(null);
@@ -28,10 +28,12 @@ function InventoryHostList({ i18n, location, match }) {
   const [hosts, setHosts] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [selected, setSelected] = useState([]);
+  const { id } = useParams();
+  const { search } = useLocation();
 
-  const fetchHosts = (id, queryString) => {
+  const fetchHosts = (hostId, queryString) => {
     const params = parseQueryString(QS_CONFIG, queryString);
-    return InventoriesAPI.readHosts(id, params);
+    return InventoriesAPI.readHosts(hostId, params);
   };
 
   useEffect(() => {
@@ -45,7 +47,7 @@ function InventoryHostList({ i18n, location, match }) {
             data: { actions: optionActions },
           },
         ] = await Promise.all([
-          fetchHosts(match.params.id, location.search),
+          fetchHosts(id, search),
           InventoriesAPI.readOptions(),
         ]);
 
@@ -60,7 +62,7 @@ function InventoryHostList({ i18n, location, match }) {
     }
 
     fetchData();
-  }, [match.params.id, location]);
+  }, [id, search]);
 
   const handleSelectAll = isSelected => {
     setSelected(isSelected ? [...hosts] : []);
@@ -86,7 +88,7 @@ function InventoryHostList({ i18n, location, match }) {
       try {
         const {
           data: { count, results },
-        } = await fetchHosts(match.params.id, location.search);
+        } = await fetchHosts(id, search);
 
         setHosts(results);
         setHostCount(count);
@@ -143,7 +145,7 @@ function InventoryHostList({ i18n, location, match }) {
                 ? [
                     <ToolbarAddButton
                       key="add"
-                      linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
+                      linkTo={`/inventories/inventory/${id}/hosts/add`}
                     />,
                   ]
                 : []),
@@ -160,8 +162,8 @@ function InventoryHostList({ i18n, location, match }) {
           <InventoryHostItem
             key={o.id}
             host={o}
-            detailUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/details`}
-            editUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/edit`}
+            detailUrl={`/inventories/inventory/${id}/hosts/${o.id}/details`}
+            editUrl={`/inventories/inventory/${id}/hosts/${o.id}/edit`}
             isSelected={selected.some(row => row.id === o.id)}
             onSelect={() => handleSelect(o)}
           />
@@ -170,7 +172,7 @@ function InventoryHostList({ i18n, location, match }) {
           canAdd && (
             <ToolbarAddButton
               key="add"
-              linkTo={`/inventories/inventory/${match.params.id}/add`}
+              linkTo={`/inventories/inventory/${id}/add`}
             />
           )
         }
@@ -190,4 +192,4 @@ function InventoryHostList({ i18n, location, match }) {
   );
 }
 
-export default withI18n()(withRouter(InventoryHostList));
+export default withI18n()(InventoryHostList);